diff --git a/package.json b/package.json index 3fb8e0a..4c1185c 100644 --- a/package.json +++ b/package.json @@ -1,12 +1,13 @@ { "name": "@mozilla/lilypad-ui", - "version": "2.0.0", + "version": "2.0.2", "description": "React Component UI Libray", "scripts": { "sb": "start-storybook -p 6006", "build-storybook": "build-storybook", "ru": "rollup -c", - "deploy-storybook": "storybook-to-ghpages --source-branch=main --ci" + "deploy-storybook": "storybook-to-ghpages --source-branch=main --ci", + "publish": "if [ $(git rev-parse --abbrev-ref HEAD) = 'main' ]; then npm publish; else echo 'You are not on the main branch!'; fi" }, "repository": { "type": "git", diff --git a/src/components/Avatar/Avatar.module.scss b/src/components/Avatar/Avatar.module.scss index 8f358c1..d16b227 100644 --- a/src/components/Avatar/Avatar.module.scss +++ b/src/components/Avatar/Avatar.module.scss @@ -9,6 +9,7 @@ border-radius: 50%; overflow: hidden; user-select: none; + background-color: $color-background-subtle-callout; img { width: 100%; diff --git a/src/components/Avatar/Avatar.tsx b/src/components/Avatar/Avatar.tsx index 74bbe8f..417f6fc 100644 --- a/src/components/Avatar/Avatar.tsx +++ b/src/components/Avatar/Avatar.tsx @@ -1,4 +1,4 @@ -import React from 'react'; +import React, { useState } from 'react'; import styles from './Avatar.module.scss'; export type AvatarPropsT = { @@ -9,12 +9,25 @@ export type AvatarPropsT = { }; const Avatar = ({ src, alt, size = 50, classProp = '' }: AvatarPropsT) => { + const [imageDidError, setImageDidError] = useState(false); return (
- {alt} + {imageDidError ? ( + + {alt} + + ) : ( + {alt} { + setImageDidError(true); + }} + /> + )}
); }; diff --git a/src/components/Button/Button.module.scss b/src/components/Button/Button.module.scss index ecef6ed..3ba5c06 100644 --- a/src/components/Button/Button.module.scss +++ b/src/components/Button/Button.module.scss @@ -5,7 +5,7 @@ @include font-size(14); line-height: 24px; - border-radius: 20px; + border-radius: $button-border-radius; box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05); text-transform: capitalize; display: inline-flex; @@ -36,24 +36,24 @@ .button_primary_solid { @include rect_button_base(); background-color: $color-interaction-primary; - border: solid 2px $color-interaction-primary; + border: solid $button-border-stroke $color-interaction-primary; color: $color-text-reverse; &:hover { background-color: $color-interaction-primary-hover; - border: solid 2px $color-interaction-primary-hover; + border: solid $button-border-stroke $color-interaction-primary-hover; } &_active, &:focus { - border: solid 2px $color-interaction-primary-active; + border: solid $button-border-stroke $color-interaction-primary-active; background-color: $color-interaction-primary-active; } &:disabled, &[disabled] { background-color: $color-interaction-primary-disabled; - border: solid 2px $color-interaction-primary-disabled; + border: solid $button-border-stroke $color-interaction-primary-disabled; color: $color-text-disabled; } } @@ -64,24 +64,24 @@ .button_primary_outline { @include rect_button_base(); background-color: transparent; - border: solid 2px $color-interaction-primary; + border: solid $button-border-stroke $color-interaction-primary; color: $color-interaction-primary; &:hover { - border: solid 2px $color-interaction-primary-hover; + border: solid $button-border-stroke $color-interaction-primary-hover; color: $color-interaction-primary-hover; } &_active, &:focus { - border: solid 2px $color-interaction-primary-active; + border: solid $button-border-stroke $color-interaction-primary-active; color: $color-interaction-primary-active; } &:disabled, &[disabled] { background-color: transparent; - border: solid 2px $color-interaction-primary-alt-disabled; + border: solid $button-border-stroke $color-interaction-primary-alt-disabled; color: $color-text-disabled; } } @@ -92,7 +92,7 @@ .button_primary_clear { @include rect_button_base(); background-color: transparent; - border: solid 2px transparent; + border: solid $button-border-stroke transparent; color: $color-interaction-primary; box-shadow: none; @@ -121,24 +121,24 @@ .button_secondary_solid { @include rect_button_base(); background-color: $color-interaction-secondary; - border: solid 2px $color-interaction-secondary; + border: solid $button-border-stroke $color-interaction-secondary; color: $color-interaction-primary; &:hover { background-color: $color-interaction-secondary-hover; - border: solid 2px $color-interaction-secondary-hover; + border: solid $button-border-stroke $color-interaction-secondary-hover; } &_active, &:focus { - border: solid 2px $color-interaction-secondary-active; + border: solid $button-border-stroke $color-interaction-secondary-active; background-color: $color-interaction-secondary-active; } &:disabled, &[disabled] { background-color: $color-interaction-secondary-disabled; - border: solid 2px $color-interaction-secondary-disabled; + border: solid $button-border-stroke $color-interaction-secondary-disabled; color: $color-text-disabled; } } @@ -149,24 +149,24 @@ .button_secondary_outline { @include rect_button_base(); background-color: transparent; - border: solid 2px $color-interaction-secondary; + border: solid $button-border-stroke $color-interaction-secondary; color: $color-interaction-secondary; &:hover { - border: solid 2px $color-interaction-secondary-hover; + border: solid $button-border-stroke $color-interaction-secondary-hover; color: $color-interaction-secondary-hover; } &_active, &:focus { - border: solid 2px $color-interaction-secondary-active; + border: solid $button-border-stroke $color-interaction-secondary-active; color: $color-interaction-secondary-hover; } &:disabled, &[disabled] { background-color: transparent; - border: solid 2px $color-interaction-secondary-disabled; + border: solid $button-border-stroke $color-interaction-secondary-disabled; color: $color-text-disabled; } } @@ -177,7 +177,7 @@ .button_secondary_clear { @include rect_button_base(); background-color: transparent; - border: solid 2px transparent; + border: solid $button-border-stroke transparent; color: $color-interaction-secondary; box-shadow: none; @@ -223,3 +223,11 @@ padding: 12px; } } + +.left { + margin-right: 10px; +} + +.right { + margin-left: 10px; +} diff --git a/src/components/Button/Button.tsx b/src/components/Button/Button.tsx index 07655fc..ed4181b 100644 --- a/src/components/Button/Button.tsx +++ b/src/components/Button/Button.tsx @@ -46,11 +46,6 @@ const ButtonIcon = ({ icon, hasText, position = 'left' }: ButtonIconT) => { return <>; } - const styles = { - left: 'mr-10', - right: 'ml-10', - }; - return ( = (args) => ( export const Main = Template.bind({}); Main.args = { - src: 'https://avatars.dicebear.com/api/big-ears/:dr.svg?background=%230000ff', + src: 'https://api.dicebear.com/7.x/bottts/png?seed=chat', alt: 'JD', size: 50, }; diff --git a/src/styles/core/variables.scss b/src/styles/core/variables.scss index 8af7518..3df8721 100644 --- a/src/styles/core/variables.scss +++ b/src/styles/core/variables.scss @@ -116,6 +116,12 @@ $color-background-modal-overlay: var(--color-background-modal-overlay); $color-background-critical: var(--color-background-critical); $color-background-neutral-0: var(--color-background-neutral-0); +/** +BUTTON LAYOUT +**/ +$button-border-radius: var(--button-border-radius); +$button-border-stroke: var(--button-border-stroke); + /** MENU **/ diff --git a/src/styles/theme.scss b/src/styles/theme.scss index c67de93..624d404 100644 --- a/src/styles/theme.scss +++ b/src/styles/theme.scss @@ -1,6 +1,14 @@ @use './tools/utility.scss' as *; @use './tools/flex.scss' as *; +:root { + /** + BUTTON LAYOUT + **/ + --button-border-radius: 20px; + --button-border-stroke: 2px; +} + main[data-theme='light'], :root { /**