Add new illustration and slider grid justify aligns (#122)

* Add new illustration

* left/right

Author: marcoacierno

src/illustrations/illustration.stories.tsx

@@ -25,6 +25,7 @@ import { SnakesWithDirections } from "./snakes-with-directions";
 import { SnakesWithOutlines } from "./snakes-with-outlines";
 import { TripleSnakes } from "./triple-snakes";
 import { SnakeWithPopcorn } from "./snake-with-popcorn";
+import { SnakesFacingLeft } from "./snakes-facing-left";
 
 export default {
   title: "Illustrations",
@@ -115,3 +116,6 @@ TripleSnakesStory.args = { component: TripleSnakes };
 
 export const SnakeWithPopcornStory = Template.bind({});
 SnakeWithPopcornStory.args = { component: SnakeWithPopcorn };
+
+export const SnakesFacingLeftStory = Template.bind({});
+SnakesFacingLeftStory.args = { component: SnakesFacingLeft };

src/illustrations/illustrations.ts

@@ -25,6 +25,7 @@ import { SnakesWithCocktail } from "./snakes-with-cocktail";
 import { SnakesWithDirections } from "./snakes-with-directions";
 import { SnakesWithOutlines } from "./snakes-with-outlines";
 import { TripleSnakes } from "./triple-snakes";
+import { SnakesFacingLeft } from "./snakes-facing-left";
 import { Illustration } from "./types";
 
 export const getIllustration = (name: Illustration | undefined) => {
@@ -83,6 +84,8 @@ export const getIllustration = (name: Illustration | undefined) => {
       return SnakeTailUp;
     case "snakeWithPopcorn":
       return SnakeWithPopcorn;
+    case "snakesFacingLeft":
+      return SnakesFacingLeft;
   }
   return null;
 };

src/illustrations/index.ts

@@ -25,4 +25,5 @@ export { SnakesWithOutlines } from "./snakes-with-outlines";
 export { TripleSnakes } from "./triple-snakes";
 export { SnakeTailUp } from "./snake-tail-up";
 export { SnakeWithPopcorn } from "./snake-with-popcorn";
+export { SnakesFacingLeft } from "./snakes-facing-left";
 export { getIllustration } from "./illustrations";

src/illustrations/snake-tail-up.tsx

@@ -34,4 +34,4 @@ export const SnakeTailUp = (props: React.SVGProps<SVGSVGElement>) => {
       </defs>
     </svg>
   );
-}
+};

src/illustrations/snakes-facing-left.tsx

@@ -25,4 +25,5 @@ export type Illustration =
   | "snakesWithOutlines"
   | "tripleSnakes"
   | "snakeTailUp"
-  | "snakeWithPopcorn";
+  | "snakeWithPopcorn"
+  | "snakesFacingLeft";

src/illustrations/types.ts

@@ -10,7 +10,7 @@ type Props = {
   cols: number;
   mdCols?: number;
   background?: "snake" | "none";
-  justifyContent?: "center";
+  justifyContent?: "left" | "center" | "right";
   wrap?: "wrap" | "nowrap";
 };
 
@@ -73,7 +73,9 @@ export const SliderGrid = ({
           className={clsx(
             `snap-x snap-mandatory overflow-x-auto flex md:-mt-2 lg:-mt-4 md:px-2 lg:px-0`,
             {
+              "md:justify-start": justifyContent === "left",
               "md:justify-center": justifyContent === "center",
+              "md:justify-end": justifyContent === "right",
 
               "md:flex-wrap": wrap === "wrap",
               "md:flex-nowrap": wrap === "nowrap",