fixing the button and the scripts (#43)

Co-authored-by: Nick Grato <[email protected]>

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",

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%;

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 (
     <div
       className={`${styles.avatar} ${classProp}`}
-      style={{ height:`${size}px`, width:`${size}px`}}
+      style={{ height: `${size}px`, width: `${size}px` }}
     >
-      <img src={src} alt={alt} />
+      {imageDidError ? (
+        <span className="body-md" style={{ fontSize: `${size / 2}px` }}>
+          {alt}
+        </span>
+      ) : (
+        <img
+          src={src}
+          alt={alt}
+          onError={() => {
+            setImageDidError(true);
+          }}
+        />
+      )}
     </div>
   );
 };

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;
+}

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 (
     <Icon
       name={icon}

src/stories/Avatar.stories.tsx

@@ -22,7 +22,7 @@ const Template: ComponentStory<typeof Avatar> = (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,
 };

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
   **/

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 {
   /**