Skip to content

Commit

Permalink
feat: favicon added and polished bnadge component NO-JIRA (#83)
Browse files Browse the repository at this point in the history
  • Loading branch information
@adrian-potepa
adrian-potepa authored Oct 12, 2023
1 parent e4ff98b commit 7ccd050
Show file tree
Hide file tree
Showing 4 changed files with 34 additions and 23 deletions.
2 changes: 2 additions & 0 deletions .storybook/manager-head.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,8 @@
href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap"
rel="stylesheet"
/>
<link rel="icon" href="/favicon.png" sizes="512x512" />

<style>
.search-field {
margin: 24px 0 !important;
Expand Down
Binary file added public/favicon.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
39 changes: 20 additions & 19 deletions src/components/Badge/Badge.styles.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -35,6 +35,7 @@ export const defaultConfig = {
hasLabel: {
px: '$space-component-padding-small',
},
text: '$typo-body-medium',
appearance: {
blue: {
emphasis: {
Expand All @@ -47,7 +48,7 @@ export const defaultConfig = {
backgroundColor: '$color-nonSemantic-blue-background-muted',
},
low: {
color: '$color-nonSemantic-blue-content-primary',
color: '$color-nonSemantic-grey-content-primary',
backgroundColor: '$color-nonSemantic-blue-background-onSubtle',
},
},
Expand All @@ -63,7 +64,7 @@ export const defaultConfig = {
backgroundColor: '$color-nonSemantic-green-background-muted',
},
low: {
color: '$color-nonSemantic-green-content-primary',
color: '$color-nonSemantic-grey-content-primary',
backgroundColor: '$color-nonSemantic-green-background-onSubtle',
},
},
Expand Down Expand Up @@ -95,23 +96,23 @@ export const defaultConfig = {
backgroundColor: '$color-nonSemantic-red-background-muted',
},
low: {
color: '$color-nonSemantic-red-content-primary',
color: '$color-nonSemantic-grey-content-primary',
backgroundColor: '$color-nonSemantic-red-background-onSubtle',
},
},
},
orange: {
emphasis: {
high: {
color: '$color-nonSemantic-white-content-primary',
color: '$color-nonSemantic-grey-content-primary',
backgroundColor: '$color-nonSemantic-orange-background-strong',
},
medium: {
color: '$color-nonSemantic-orange-content-primary',
backgroundColor: '$color-nonSemantic-orange-background-muted',
},
low: {
color: '$color-nonSemantic-orange-content-primary',
color: '$color-nonSemantic-grey-content-primary',
backgroundColor: '$color-nonSemantic-orange-background-onSubtle',
},
},
Expand All @@ -127,7 +128,7 @@ export const defaultConfig = {
backgroundColor: '$color-nonSemantic-raspberry-background-muted',
},
low: {
color: '$color-nonSemantic-raspberry-content-primary',
color: '$color-nonSemantic-grey-content-primary',
backgroundColor: '$color-nonSemantic-raspberry-background-onSubtle',
},
},
Expand All @@ -143,7 +144,7 @@ export const defaultConfig = {
backgroundColor: '$color-nonSemantic-magenta-background-muted',
},
low: {
color: '$color-nonSemantic-magenta-content-primary',
color: '$color-nonSemantic-grey-content-primary',
backgroundColor: '$color-nonSemantic-magenta-background-onSubtle',
},
},
Expand All @@ -159,7 +160,7 @@ export const defaultConfig = {
backgroundColor: '$color-nonSemantic-purple-background-muted',
},
low: {
color: '$color-nonSemantic-purple-content-primary',
color: '$color-nonSemantic-grey-content-primary',
backgroundColor: '$color-nonSemantic-purple-background-onSubtle',
},
},
Expand All @@ -175,7 +176,7 @@ export const defaultConfig = {
backgroundColor: '$color-nonSemantic-grape-background-muted',
},
low: {
color: '$color-nonSemantic-grape-content-primary',
color: '$color-nonSemantic-grey-content-primary',
backgroundColor: '$color-nonSemantic-grape-background-onSubtle',
},
},
Expand All @@ -191,7 +192,7 @@ export const defaultConfig = {
backgroundColor: '$color-nonSemantic-violet-background-muted',
},
low: {
color: '$color-nonSemantic-violet-content-primary',
color: '$color-nonSemantic-grey-content-primary',
backgroundColor: '$color-nonSemantic-violet-background-onSubtle',
},
},
Expand All @@ -207,7 +208,7 @@ export const defaultConfig = {
backgroundColor: '$color-nonSemantic-cyan-background-muted',
},
low: {
color: '$color-nonSemantic-cyan-content-primary',
color: '$color-nonSemantic-grey-content-primary',
backgroundColor: '$color-nonSemantic-cyan-background-onSubtle',
},
},
Expand All @@ -223,7 +224,7 @@ export const defaultConfig = {
backgroundColor: '$color-nonSemantic-teal-background-muted',
},
low: {
color: '$color-nonSemantic-teal-content-primary',
color: '$color-nonSemantic-grey-content-primary',
backgroundColor: '$color-nonSemantic-teal-background-onSubtle',
},
},
Expand All @@ -239,7 +240,7 @@ export const defaultConfig = {
backgroundColor: '$color-nonSemantic-aquamarine-background-muted',
},
low: {
color: '$color-nonSemantic-aquamarine-content-primary',
color: '$color-nonSemantic-grey-content-primary',
backgroundColor: '$color-nonSemantic-aquamarine-background-onSubtle',
},
},
Expand All @@ -255,7 +256,7 @@ export const defaultConfig = {
backgroundColor: '$color-nonSemantic-emerald-background-muted',
},
low: {
color: '$color-nonSemantic-emerald-content-primary',
color: '$color-nonSemantic-grey-content-primary',
backgroundColor: '$color-nonSemantic-emerald-background-onSubtle',
},
},
Expand Down Expand Up @@ -295,7 +296,7 @@ export const defaultConfig = {
backgroundColor: '$color-background-neutral-muted',
},
low: {
color: '$color-content-primary',
color: '$color-nonSemantic-grey-content-primary',
backgroundColor: '$color-background-neutral-onSubtle',
},
},
Expand All @@ -311,7 +312,7 @@ export const defaultConfig = {
backgroundColor: '$color-background-informative-muted',
},
low: {
color: '$color-content-informative-primary',
color: '$color-nonSemantic-grey-content-primary',
backgroundColor: '$color-background-informative-onSubtle',
},
},
Expand All @@ -327,7 +328,7 @@ export const defaultConfig = {
backgroundColor: '$color-background-positive-muted',
},
low: {
color: '$color-content-positive-primary',
color: '$color-nonSemantic-grey-content-primary',
backgroundColor: '$color-background-positive-onSubtle',
},
},
Expand All @@ -343,7 +344,7 @@ export const defaultConfig = {
backgroundColor: '$color-background-warning-muted',
},
low: {
color: '$color-content-warning-primary',
color: '$color-nonSemantic-grey-content-primary',
backgroundColor: '$color-background-warning-onSubtle',
},
},
Expand All @@ -359,7 +360,7 @@ export const defaultConfig = {
backgroundColor: '$color-background-negative-muted',
},
low: {
color: '$color-content-negative-primary',
color: '$color-nonSemantic-grey-content-primary',
backgroundColor: '$color-background-negative-onSubtle',
},
},
Expand Down
16 changes: 12 additions & 4 deletions src/docs-components/BadgeDocs.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -46,8 +46,8 @@ export const BadgeDocs = () => (
flexShrink="0"
flexGrow="1"
>
<Badge intent={intent} label="Badge Text" />
<Badge intent={intent} icon="16-bolt" />
<Badge intent={intent} emphasis={emphasis} label="Badge Text" />
<Badge intent={intent} emphasis={emphasis} icon="16-bolt" />
</tet.div>
))}
</tet.div>
Expand All @@ -72,8 +72,16 @@ export const BadgeDocs = () => (
gap="$dimension-400"
flexShrink="0"
>
<Badge appearance={appearance} label="Badge Text" />
<Badge appearance={appearance} icon="16-bolt" />
<Badge
appearance={appearance}
emphasis={emphasis}
label="Badge Text"
/>
<Badge
appearance={appearance}
emphasis={emphasis}
icon="16-bolt"
/>
</tet.div>
))}
</tet.div>
Expand Down

0 comments on commit 7ccd050

Please sign in to comment.