Merge pull request #48 from buildo/fixes

veej · web-flow · commit a907b5919057 · 2022-03-04T11:45:50.000+01:00
Various fixes after integrating with HM
diff --git a/src/Avatar/createAvatar.tsx b/src/Avatar/createAvatar.tsx
@@ -51,7 +51,7 @@ export function createAvatar(
           {initial ? (
             <Label size={config.labelSize}>{unsafeLocalizedString(initial)}</Label>
           ) : (
-            <config.icon size={16} />
+            <config.icon size={16} color="primary" />
           )}
         </Box>
       </Box>
diff --git a/src/Banner/Banner.css.ts b/src/Banner/Banner.css.ts
@@ -16,6 +16,9 @@ export const bannerRecipe = strictRecipe({
       negative: bentoSprinkles({
         background: "backgroundNegative",
       }),
+      tip: bentoSprinkles({
+        background: "backgroundSecondary",
+      }),
     },
   },
 });
diff --git a/src/Banner/createBanner.tsx b/src/Banner/createBanner.tsx
@@ -9,6 +9,7 @@ import {
   IconCheckCircleSolid,
   IconWarning,
   IconNegative,
+  IconIdea,
 } from "..";
 import { Columns, Column, Box, Stack, BentoSprinkles } from "../internal";
 import { bannerRecipe } from "./Banner.css";
@@ -25,7 +26,7 @@ type DismissProps =
       onDismiss?: never;
     };
 
-type Kind = "informative" | "positive" | "warning" | "negative";
+type Kind = "informative" | "positive" | "warning" | "negative" | "tip";
 
 type Props = {
   kind: Kind;
@@ -64,12 +65,13 @@ export function createBanner({
     positive: IconCheckCircleSolid,
     warning: IconWarning,
     negative: IconNegative,
+    tip: IconIdea,
   },
 }: BannerConfig) {
   return function Banner({ title, description, kind, ...dismissProps }: Props) {
     const isWithoutTitle = title === undefined;
     const iconSize = isWithoutTitle ? 16 : 24;
-    const iconProps = { size: iconSize, color: kind } as const;
+    const iconProps = { size: iconSize, color: kind === "tip" ? "secondary" : kind } as const;
     const Icon = kindIcons[kind];
 
     return (
@@ -82,7 +84,7 @@ export function createBanner({
           </Column>
           <Stack align="left" space={4}>
             {title && (
-              <Title size={titleSize} color={kind}>
+              <Title size={titleSize} color={kind === "tip" ? "secondary" : kind}>
                 {title}
               </Title>
             )}
@@ -93,9 +95,8 @@ export function createBanner({
               <IconButton
                 label={dismissProps.dismissButtonLabel}
                 onPress={dismissProps.onDismiss}
-                size={16}
+                size={12}
                 icon={closeIcon}
-                color="primary"
               />
             </Column>
           )}
diff --git a/src/Icons/Icon.css.ts b/src/Icons/Icon.css.ts
@@ -17,7 +17,7 @@ export const iconRecipe = recipe({
       24: bentoSprinkles({ height: 24 }),
     },
     color: {
-      default: bentoSprinkles({ fill: "foregroundPrimary" }),
+      default: bentoSprinkles({ fill: "foregroundSecondary" }),
       primary: bentoSprinkles({ fill: "foregroundPrimary" }),
       secondary: bentoSprinkles({ fill: "foregroundSecondary" }),
       informative: bentoSprinkles({ fill: "foregroundInformative" }),
diff --git a/src/Icons/IconIdea.tsx b/src/Icons/IconIdea.tsx
@@ -0,0 +1,10 @@
+import { IconProps } from "./IconProps";
+import { svgIconProps } from "./svgIconProps";
+
+export function IconIdea(props: IconProps) {
+  return (
+    <svg {...svgIconProps(props)}>
+      <path d="M12 5.45455C13.736 5.45455 15.4008 6.14415 16.6283 7.37167C17.8558 8.59918 18.5455 10.264 18.5455 12C18.5455 14.4218 17.2255 16.5382 15.2727 17.6727V19.6364C15.2727 19.9257 15.1578 20.2032 14.9532 20.4078C14.7486 20.6123 14.4711 20.7273 14.1818 20.7273H9.81818C9.52886 20.7273 9.25138 20.6123 9.04679 20.4078C8.84221 20.2032 8.72727 19.9257 8.72727 19.6364V17.6727C6.77455 16.5382 5.45455 14.4218 5.45455 12C5.45455 10.264 6.14415 8.59918 7.37167 7.37167C8.59918 6.14415 10.264 5.45455 12 5.45455ZM13.1818 21.8182C13.7341 21.8182 14.1818 22.2659 14.1818 22.8182V22.9091C14.1818 23.1984 14.0669 23.4759 13.8623 23.6805C13.6577 23.8851 13.3802 24 13.0909 24H10.9091C10.6198 24 10.3423 23.8851 10.1377 23.6805C9.93312 23.4759 9.81818 23.1984 9.81818 22.9091V22.8182C9.81818 22.2659 10.2659 21.8182 10.8182 21.8182H13.1818ZM20.7273 11.9091C20.7273 11.3568 21.175 10.9091 21.7273 10.9091H23C23.5523 10.9091 24 11.3568 24 11.9091V12.0909C24 12.6432 23.5523 13.0909 23 13.0909H21.7273C21.175 13.0909 20.7273 12.6432 20.7273 12.0909V11.9091ZM0 11.9091C0 11.3568 0.447715 10.9091 1 10.9091H2.27273C2.82501 10.9091 3.27273 11.3568 3.27273 11.9091V12.0909C3.27273 12.6432 2.82501 13.0909 2.27273 13.0909H1C0.447715 13.0909 0 12.6432 0 12.0909V11.9091ZM12.0909 0C12.6432 0 13.0909 0.447715 13.0909 1V2.27273C13.0909 2.82501 12.6432 3.27273 12.0909 3.27273H11.9091C11.3568 3.27273 10.9091 2.82501 10.9091 2.27273V1C10.9091 0.447715 11.3568 0 11.9091 0H12.0909ZM3.56761 3.44102C3.95837 3.04751 4.59473 3.04713 4.98595 3.44019L5.89371 4.35221C6.28365 4.74398 6.28179 5.37779 5.88955 5.76726L5.75635 5.89953C5.36607 6.28706 4.73611 6.28668 4.3463 5.8987L3.43522 4.9919C3.0441 4.60261 3.04225 3.97008 3.43108 3.57851L3.56761 3.44102ZM18.1054 5.75635C17.7156 5.36648 17.7148 4.7346 18.1038 4.34381L19.0056 3.43771C19.3959 3.04562 20.0303 3.04487 20.4215 3.43605L20.564 3.5785C20.9551 3.96967 20.9544 4.60412 20.5623 4.99438L19.6562 5.89622C19.2654 6.28517 18.6335 6.28443 18.2436 5.89456L18.1054 5.75635Z" />
+    </svg>
+  );
+}
diff --git a/src/Icons/index.ts b/src/Icons/index.ts
@@ -4,6 +4,7 @@ export * from "./IconChevronDown";
 export * from "./IconChevronRight";
 export * from "./IconChevronUp";
 export * from "./IconClose";
+export * from "./IconIdea";
 export * from "./IconInformative";
 export * from "./IconNegative";
 export * from "./IconProps";
diff --git a/src/Modal/createModal.tsx b/src/Modal/createModal.tsx
@@ -20,8 +20,8 @@ import { IconProps } from "../Icons/IconProps";
 export type ModalProps = {
   title: LocalizedString;
   children: Children;
-  primaryAction?: Omit<ButtonProps, "kind" | "size">;
-  secondaryAction?: Omit<ButtonProps, "kind" | "size">;
+  primaryAction?: Omit<ButtonProps, "kind" | "hierarchy" | "size">;
+  secondaryAction?: Omit<ButtonProps, "kind" | "hierarchy" | "size">;
   onClose: () => void;
   closeButtonLabel: LocalizedString;
   isDestructive?: boolean;
diff --git a/src/SearchBar/createSearchBar.tsx b/src/SearchBar/createSearchBar.tsx
@@ -60,7 +60,6 @@ export function createSearchBar(
           onPress={() => props.onChange("")}
           size={16}
           icon={config.clearIcon}
-          color="primary"
         />
       ) : null;
 
diff --git a/src/TextField/createTextField.tsx b/src/TextField/createTextField.tsx
@@ -10,7 +10,7 @@ import { InputConfig } from "../Field/InputConfig";
 
 type Props = FieldProps<string> & {
   placeholder: LocalizedString;
-  type?: "text" | "email" | "url" | "search";
+  type?: "text" | "email" | "url" | "password";
   disabled?: boolean;
 };
 
diff --git a/src/Typography/Title/Title.css.ts b/src/Typography/Title/Title.css.ts
@@ -19,6 +19,7 @@ export const titleRecipe = strictRecipe({
       positive: bentoSprinkles({ color: "textPositive" }),
       warning: bentoSprinkles({ color: "textWarning" }),
       negative: bentoSprinkles({ color: "textNegative" }),
+      secondary: bentoSprinkles({ color: "textSecondary" }),
     },
   },
 });
diff --git a/src/Typography/Title/Title.tsx b/src/Typography/Title/Title.tsx
@@ -5,7 +5,7 @@ import { titleRecipe } from "./Title.css";
 
 type Size = "small" | "medium" | "large";
 type Align = "left" | "center" | "right";
-type Color = "default" | "informative" | "positive" | "warning" | "negative";
+type Color = "default" | "informative" | "positive" | "warning" | "negative" | "secondary";
 
 type Props = {
   children: LocalizedString;
diff --git a/src/index.ts b/src/index.ts
@@ -24,6 +24,7 @@ export * from "./Layout/createLayoutComponents";
 export * from "./Link/createLink";
 export * from "./List/createList";
 export * from "./Modal/createModal";
+export * from "./NumberInput/createNumberInput";
 export * from "./Placeholder/Placeholder";
 export * from "./SearchBar/createSearchBar";
 export * from "./Switch/createSwitch";
@@ -44,3 +45,12 @@ export * from "./util/atoms";
 export * from "./util/breakpoints";
 export * from "./util/conditions";
 export * from "./util/link";
+
+export { bodyRecipe } from "./Typography/Body/Body.css";
+export { labelRecipe } from "./Typography/Label/Label.css";
+export { titleRecipe } from "./Typography/Title/Title.css";
+export { headlineRecipe } from "./Typography/Headline/Headline.css";
+export { displayRecipe } from "./Typography/Display/Display.css";
+export { inputRecipe } from "./Field/Field.css";
+
+export type { SelectFieldProps } from "./SelectField/createSelectField";
diff --git a/stories/Components/Banner.stories.tsx b/stories/Components/Banner.stories.tsx
@@ -60,6 +60,12 @@ export const Negative = createStory({
   description: shortDescription,
 });
 
+export const Tip = createStory({
+  kind: "tip",
+  title,
+  description: shortDescription,
+});
+
 export const NoDescription = createStory({
   kind: "informative",
   title,
