From 729c3ee9341ba5c3d05ffffe1ee97c047f0534ad Mon Sep 17 00:00:00 2001 From: Micah Ilbery Date: Tue, 3 Dec 2024 16:24:19 -0700 Subject: [PATCH] Add Badges (Fixes #10) (PR #15) * Add badges * undo hard coded hex color * separate expiry badge * remove un-needed type --- src/assets/styles/colours.css | 13 +++ .../icons/{expiry.svg => status-expiry.svg} | 0 src/assets/svg/icons/status-info.svg | 6 ++ src/assets/svg/icons/status-warning.svg | 6 ++ src/elements/BaseBadge.stories.ts | 68 ++++++++++++++ src/elements/BaseBadge.vue | 75 ++++++++++++++++ ...ator.stories.ts => ExpiryBadge.stories.ts} | 10 +-- src/elements/ExpiryBadge.vue | 42 +++++++++ src/elements/ExpiryIndicator.vue | 89 ------------------- src/elements/PrimaryBadge.vue | 9 ++ src/elements/SecondaryBadge.vue | 9 ++ src/elements/WarningBadge.vue | 9 ++ .../{ExpiryIcon.vue => StatusExpiryIcon.vue} | 2 +- src/icons/StatusInfoIcon.vue | 15 ++++ src/icons/StatusWarningIcon.vue | 15 ++++ src/locales/de.json | 6 +- src/locales/en.json | 6 +- src/main.ts | 22 ++++- 18 files changed, 295 insertions(+), 107 deletions(-) rename src/assets/svg/icons/{expiry.svg => status-expiry.svg} (100%) create mode 100644 src/assets/svg/icons/status-info.svg create mode 100644 src/assets/svg/icons/status-warning.svg create mode 100644 src/elements/BaseBadge.stories.ts create mode 100644 src/elements/BaseBadge.vue rename src/elements/{ExpiryIndicator.stories.ts => ExpiryBadge.stories.ts} (82%) create mode 100644 src/elements/ExpiryBadge.vue delete mode 100644 src/elements/ExpiryIndicator.vue create mode 100644 src/elements/PrimaryBadge.vue create mode 100644 src/elements/SecondaryBadge.vue create mode 100644 src/elements/WarningBadge.vue rename src/icons/{ExpiryIcon.vue => StatusExpiryIcon.vue} (96%) create mode 100644 src/icons/StatusInfoIcon.vue create mode 100644 src/icons/StatusWarningIcon.vue diff --git a/src/assets/styles/colours.css b/src/assets/styles/colours.css index ea82453..7b67195 100644 --- a/src/assets/styles/colours.css +++ b/src/assets/styles/colours.css @@ -224,6 +224,19 @@ html { --colour-send-primary-accent-2: #1F8DDB; } + /* + * Brand Colours + * Thunderbird + * The fallback if no service is set. + */ + --colour-service-soft: var(--colour-primary-soft); + --colour-service-primary: var(--colour-primary-default); + --colour-service-primary-hover: var(--colour-primary-hover); + --colour-service-primary-pressed: var(--colour-primary-pressed); + --colour-service-secondary: var(--colour-secondary-default); + --colour-service-accent-1: var(--colour-accent-purple); + --colour-service-accent-2: var(--colour-accent-teal); + &[data-tbpro-service='apmt'] { --colour-service-soft: var(--colour-apmt-soft); --colour-service-primary: var(--colour-apmt-primary); diff --git a/src/assets/svg/icons/expiry.svg b/src/assets/svg/icons/status-expiry.svg similarity index 100% rename from src/assets/svg/icons/expiry.svg rename to src/assets/svg/icons/status-expiry.svg diff --git a/src/assets/svg/icons/status-info.svg b/src/assets/svg/icons/status-info.svg new file mode 100644 index 0000000..64b8e8f --- /dev/null +++ b/src/assets/svg/icons/status-info.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/src/assets/svg/icons/status-warning.svg b/src/assets/svg/icons/status-warning.svg new file mode 100644 index 0000000..6ea7637 --- /dev/null +++ b/src/assets/svg/icons/status-warning.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/src/elements/BaseBadge.stories.ts b/src/elements/BaseBadge.stories.ts new file mode 100644 index 0000000..2f00e9c --- /dev/null +++ b/src/elements/BaseBadge.stories.ts @@ -0,0 +1,68 @@ +import type { Meta, StoryObj } from '@storybook/vue3'; + +import BaseBadge from "@/elements/BaseBadge.vue"; + +// More on how to set up stories at: https://storybook.js.org/docs/writing-stories +const meta: Meta = { + title: "Elements/Badge", + component: BaseBadge, + // This component will have an automatically generated docsPage entry: https://storybook.js.org/docs/writing-docs/autodocs + tags: ["autodocs"], + argTypes: { + type: { control: "select", options: ["primary", "secondary", "warning"] }, + icon: { control: "boolean" }, + default: { control: "text" }, + }, + args: { + default: "Recommended", + }, +}; + +export default meta; +type Story = StoryObj; + +export const Default: Story = { + args: { + type: "primary", + icon: false, + }, +}; + +export const Secondary: Story = { + args: { + type: "secondary", + icon: false, + default: "Updated", + }, +}; + +export const Warning: Story = { + args: { + type: "warning", + icon: false, + default: "Experimental" + }, +}; + +export const IconPrimary: Story = { + args: { + type: "primary", + icon: true, + }, +}; + +export const IconSecondary: Story = { + args: { + type: "secondary", + icon: true, + default: "Updated", + }, +}; + +export const IconWarning: Story = { + args: { + type: "warning", + icon: true, + default: "Experimental", + }, +}; diff --git a/src/elements/BaseBadge.vue b/src/elements/BaseBadge.vue new file mode 100644 index 0000000..6ed8007 --- /dev/null +++ b/src/elements/BaseBadge.vue @@ -0,0 +1,75 @@ + + + + + diff --git a/src/elements/ExpiryIndicator.stories.ts b/src/elements/ExpiryBadge.stories.ts similarity index 82% rename from src/elements/ExpiryIndicator.stories.ts rename to src/elements/ExpiryBadge.stories.ts index 77f5d5f..b9c9ad3 100644 --- a/src/elements/ExpiryIndicator.stories.ts +++ b/src/elements/ExpiryBadge.stories.ts @@ -1,11 +1,11 @@ import type { Meta, StoryObj } from '@storybook/vue3'; -import ExpiryIndicator from "@/elements/ExpiryIndicator.vue"; +import ExpiryBadge from "@/elements/ExpiryBadge.vue"; import { ExpiryUnitTypes } from "@/definitions"; // More on how to set up stories at: https://storybook.js.org/docs/writing-stories -const meta: Meta = { - title: "Elements/ExpiryIndicator", - component: ExpiryIndicator, +const meta: Meta = { + title: "Elements/ExpiryBadge", + component: ExpiryBadge, // This component will have an automatically generated docsPage entry: https://storybook.js.org/docs/writing-docs/autodocs tags: ["autodocs"], args: { @@ -18,7 +18,7 @@ const meta: Meta = { export default meta; type Story = StoryObj; -export const Info: Story = { +export const Default: Story = { args: { timeRemaining: 10, timeUnit: ExpiryUnitTypes.Years, diff --git a/src/elements/ExpiryBadge.vue b/src/elements/ExpiryBadge.vue new file mode 100644 index 0000000..49ffc33 --- /dev/null +++ b/src/elements/ExpiryBadge.vue @@ -0,0 +1,42 @@ + + + diff --git a/src/elements/ExpiryIndicator.vue b/src/elements/ExpiryIndicator.vue deleted file mode 100644 index 16e869c..0000000 --- a/src/elements/ExpiryIndicator.vue +++ /dev/null @@ -1,89 +0,0 @@ - - - - - diff --git a/src/elements/PrimaryBadge.vue b/src/elements/PrimaryBadge.vue new file mode 100644 index 0000000..0c5c81d --- /dev/null +++ b/src/elements/PrimaryBadge.vue @@ -0,0 +1,9 @@ + + + diff --git a/src/elements/SecondaryBadge.vue b/src/elements/SecondaryBadge.vue new file mode 100644 index 0000000..073ae19 --- /dev/null +++ b/src/elements/SecondaryBadge.vue @@ -0,0 +1,9 @@ + + + diff --git a/src/elements/WarningBadge.vue b/src/elements/WarningBadge.vue new file mode 100644 index 0000000..2d169ea --- /dev/null +++ b/src/elements/WarningBadge.vue @@ -0,0 +1,9 @@ + + + diff --git a/src/icons/ExpiryIcon.vue b/src/icons/StatusExpiryIcon.vue similarity index 96% rename from src/icons/ExpiryIcon.vue rename to src/icons/StatusExpiryIcon.vue index f25e420..b4794c7 100644 --- a/src/icons/ExpiryIcon.vue +++ b/src/icons/StatusExpiryIcon.vue @@ -3,7 +3,7 @@ import { t } from '@/composable/i18n';