From 3b3effc619f8caf35a5c247335f4f7e4d23a36b5 Mon Sep 17 00:00:00 2001 From: Ester Beltrami Date: Tue, 26 May 2026 10:50:46 +0200 Subject: [PATCH 1/5] Add snake staff illustration component. Use vector-only SVG (no embedded raster) so lanyard and badge align with strokes. Register snakeStaff and add Storybook story. --- src/illustrations/illustration.stories.tsx | 4 + src/illustrations/illustrations.ts | 3 + src/illustrations/index.ts | 1 + src/illustrations/serpente-staff.svg | 33 +++++ src/illustrations/snake-staff.tsx | 154 +++++++++++++++++++++ src/illustrations/types.ts | 1 + 6 files changed, 196 insertions(+) create mode 100644 src/illustrations/serpente-staff.svg create mode 100644 src/illustrations/snake-staff.tsx diff --git a/src/illustrations/illustration.stories.tsx b/src/illustrations/illustration.stories.tsx index b19ccdf..512cbe9 100644 --- a/src/illustrations/illustration.stories.tsx +++ b/src/illustrations/illustration.stories.tsx @@ -16,6 +16,7 @@ import { SnakeInDragonInverted } from "./snake-in-dragon-inverted"; import { SnakeLetter } from "./snake-letter"; import { SnakeLongNeck } from "./snake-long-neck"; import { SnakePencil } from "./snake-pencil"; +import { SnakeStaff } from "./snake-staff"; import { SnakeTail } from "./snake-tail"; import { SnakeWithBalloon } from "./snake-with-balloon"; import { SnakeWithContacts } from "./snake-with-contacts"; @@ -90,6 +91,9 @@ SnakeLongNeckStory.args = { component: SnakeLongNeck }; export const SnakePencilStory = Template.bind({}); SnakePencilStory.args = { component: SnakePencil }; +export const SnakeStaffStory = Template.bind({}); +SnakeStaffStory.args = { component: SnakeStaff }; + export const SnakeTailStory = Template.bind({}); SnakeTailStory.args = { component: SnakeTail }; diff --git a/src/illustrations/illustrations.ts b/src/illustrations/illustrations.ts index f4d930c..a04dbf7 100644 --- a/src/illustrations/illustrations.ts +++ b/src/illustrations/illustrations.ts @@ -15,6 +15,7 @@ import { SnakeInDragonInverted } from "./snake-in-dragon-inverted"; import { SnakeLetter } from "./snake-letter"; import { SnakeLongNeck } from "./snake-long-neck"; import { SnakePencil } from "./snake-pencil"; +import { SnakeStaff } from "./snake-staff"; import { SnakeTail } from "./snake-tail"; import { SnakeTailUp } from "./snake-tail-up"; import { SnakeWithBalloon } from "./snake-with-balloon"; @@ -64,6 +65,8 @@ export const getIllustration = (name: Illustration | undefined) => { return SnakeLongNeck; case "snakePencil": return SnakePencil; + case "snakeStaff": + return SnakeStaff; case "snakeTail": return SnakeTail; case "snakeWithBalloon": diff --git a/src/illustrations/index.ts b/src/illustrations/index.ts index 78ef526..5b92dd6 100644 --- a/src/illustrations/index.ts +++ b/src/illustrations/index.ts @@ -15,6 +15,7 @@ export { SnakeInDragonInverted } from "./snake-in-dragon-inverted"; export { SnakeLetter } from "./snake-letter"; export { SnakeLongNeck } from "./snake-long-neck"; export { SnakePencil } from "./snake-pencil"; +export { SnakeStaff } from "./snake-staff"; export { SnakeTail } from "./snake-tail"; export { SnakeWithBalloon } from "./snake-with-balloon"; export { SnakeWithContacts } from "./snake-with-contacts"; diff --git a/src/illustrations/serpente-staff.svg b/src/illustrations/serpente-staff.svg new file mode 100644 index 0000000..14eadb1 --- /dev/null +++ b/src/illustrations/serpente-staff.svg @@ -0,0 +1,33 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +STAFF +PyCon Italia + + diff --git a/src/illustrations/snake-staff.tsx b/src/illustrations/snake-staff.tsx new file mode 100644 index 0000000..dffdb2e --- /dev/null +++ b/src/illustrations/snake-staff.tsx @@ -0,0 +1,154 @@ +import * as React from "react"; + +export const SnakeStaff = (props: React.SVGProps) => { + return ( + + + + + + + + + + + + + + + + + + + + + + + + + + + + + {"STAFF"} + + + {"PyCon Italia"} + + + ); +}; diff --git a/src/illustrations/types.ts b/src/illustrations/types.ts index b2c0ecc..dd5fd7a 100644 --- a/src/illustrations/types.ts +++ b/src/illustrations/types.ts @@ -17,6 +17,7 @@ export type Illustration = | "snakeLongNeck" | "snakeTail" | "snakePencil" + | "snakeStaff" | "snakeWithBalloon" | "snakeWithContacts" | "snakesWithBanner" From d619e8bd3b88210e8760f789d8e988b9082579f8 Mon Sep 17 00:00:00 2001 From: Ester Beltrami Date: Tue, 26 May 2026 14:01:04 +0200 Subject: [PATCH 2/5] Update snake staff illustration from Figma export. Drop the redundant serpente-staff.svg source file; the React component is the single source of truth. --- src/illustrations/serpente-staff.svg | 33 ----- src/illustrations/snake-staff.tsx | 192 +++++++-------------------- 2 files changed, 51 insertions(+), 174 deletions(-) delete mode 100644 src/illustrations/serpente-staff.svg diff --git a/src/illustrations/serpente-staff.svg b/src/illustrations/serpente-staff.svg deleted file mode 100644 index 14eadb1..0000000 --- a/src/illustrations/serpente-staff.svg +++ /dev/null @@ -1,33 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -STAFF -PyCon Italia - - diff --git a/src/illustrations/snake-staff.tsx b/src/illustrations/snake-staff.tsx index dffdb2e..2d25735 100644 --- a/src/illustrations/snake-staff.tsx +++ b/src/illustrations/snake-staff.tsx @@ -7,148 +7,58 @@ export const SnakeStaff = (props: React.SVGProps) => { height={625} viewBox="0 0 558 625" fill="none" + xmlns="http://www.w3.org/2000/svg" {...props} > - - - - - - - - - - - - - - - - - - - - - - - - - - - - {"STAFF"} - - - {"PyCon Italia"} - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + ); }; From e4bcd3c993cd0a4611bef6be2103af37378faea6 Mon Sep 17 00:00:00 2001 From: Ester Beltrami Date: Tue, 26 May 2026 14:12:34 +0200 Subject: [PATCH 3/5] Update snake staff badge and label paths from Figma. Use the orange staff badge and revised vector outlines for STAFF and PyCon Italia. --- src/illustrations/snake-staff.tsx | 11 +++++------ 1 file changed, 5 insertions(+), 6 deletions(-) diff --git a/src/illustrations/snake-staff.tsx b/src/illustrations/snake-staff.tsx index 2d25735..c829f94 100644 --- a/src/illustrations/snake-staff.tsx +++ b/src/illustrations/snake-staff.tsx @@ -43,16 +43,15 @@ export const SnakeStaff = (props: React.SVGProps) => { - - - - - - + + + + + From 5babd2d5db754638ea3b52185210b1a2f4e3e1d0 Mon Sep 17 00:00:00 2001 From: Ester Beltrami Date: Tue, 26 May 2026 14:23:53 +0200 Subject: [PATCH 4/5] Update snake staff lanyard layering from Figma export. Redraw strap behind bodies with a separate front mask and revised path geometry. --- src/illustrations/snake-staff.tsx | 23 +++++++++-------------- 1 file changed, 9 insertions(+), 14 deletions(-) diff --git a/src/illustrations/snake-staff.tsx b/src/illustrations/snake-staff.tsx index c829f94..a66a071 100644 --- a/src/illustrations/snake-staff.tsx +++ b/src/illustrations/snake-staff.tsx @@ -11,17 +11,10 @@ export const SnakeStaff = (props: React.SVGProps) => { {...props} > - - - - - - - - + - + @@ -30,21 +23,23 @@ export const SnakeStaff = (props: React.SVGProps) => { - + - + - + + + - - + + From 2b3e63ad9f324248b40b3c9da8534fd38ee7b315 Mon Sep 17 00:00:00 2001 From: Ester Beltrami Date: Tue, 26 May 2026 14:58:49 +0200 Subject: [PATCH 5/5] Update snake staff badge and lanyard from Figma export. --- src/illustrations/snake-staff.tsx | 60 ++++++++++++++++--------------- 1 file changed, 31 insertions(+), 29 deletions(-) diff --git a/src/illustrations/snake-staff.tsx b/src/illustrations/snake-staff.tsx index a66a071..601cb60 100644 --- a/src/illustrations/snake-staff.tsx +++ b/src/illustrations/snake-staff.tsx @@ -10,49 +10,51 @@ export const SnakeStaff = (props: React.SVGProps) => { xmlns="http://www.w3.org/2000/svg" {...props} > - + - + - - - - - - - + + + + + + + - + - - - - + + + + - - + + - + - - + + - - - - - - - - + + + + + + + + + + - + - + ); };