From 5e47bf68155bc196ca95fe53d2a73b45133a6da7 Mon Sep 17 00:00:00 2001 From: Stephanie Smith Date: Tue, 28 May 2024 16:46:44 -0700 Subject: [PATCH 01/11] adding more Base components and BlockImage --- apps/html-storybook/package.json | 9 +- apps/html-storybook/postcss.config.js | 1 + apps/vue-storybook/.storybook/main.ts | 13 +- apps/vue-storybook/.storybook/preview.ts | 9 +- apps/vue-storybook/package.json | 2 + apps/vue-storybook/postcss.config.js | 1 + .../{BaseButton => }/BaseButton.stories.ts | 53 +-- .../stories/BaseHeading.stories.js | 75 ++++ .../stories/BaseImage.stories.ts | 52 +++ .../stories/BaseImageCaption.stories.js | 27 ++ .../stories/BaseImagePlaceholder.stories.js | 73 ++++ .../vue-storybook/stories/BaseLink.stories.ts | 54 +-- .../stories/BlockImage.stories.js | 144 ++++++ apps/vue-storybook/stories/Icons.stories.ts | 42 ++ .../stories/Icons/Icons.stories.ts | 26 -- .../stories/MixinAnimationCaret.stories.ts | 24 + .../MixinAnimationCaret.stories.ts | 26 -- apps/vue-storybook/tailwind.config.ts | 2 +- .../src/scss/_typography-theme-colors.scss | 42 +- packages/html/package.json | 1 + packages/html/postcss.config.js | 7 +- packages/vue/dist/explorer-1-vue.js | 388 ++++++++++++++++- packages/vue/dist/explorer-1-vue.umd.cjs | 2 +- packages/vue/dist/style.css | 2 +- packages/vue/lib/main.ts | 19 +- packages/vue/package.json | 1 + packages/vue/postcss.config.js | 1 + .../components/BaseHeading/BaseHeading.vue | 59 +++ .../src/components/BaseImage/BaseImage.vue | 122 ++++++ .../BaseImageCaption/BaseImageCaption.vue | 48 ++ .../BaseImagePlaceholder.vue | 91 ++++ .../src/components/BlockImage/BlockImage.vue | 48 ++ .../BlockImage/BlockImageFullBleed.vue | 121 ++++++ .../BlockImage/BlockImageStandard.vue | 103 +++++ .../vue/src/components/Icons/IconArrows.vue | 40 ++ .../vue/src/components/Icons/IconLocation.vue | 33 ++ .../vue/src/components/Icons/IconUser.vue | 23 + .../components/LayoutHelper/LayoutHelper.vue | 38 ++ .../MixinFancybox/MixinFancybox.vue | 410 ++++++++++++++++++ .../MixinFancybox/MixinFancyboxOpenButton.vue | 36 ++ packages/vue/src/interfaces.ts | 13 + pnpm-lock.yaml | 99 ++++- 42 files changed, 2189 insertions(+), 191 deletions(-) rename apps/vue-storybook/stories/{BaseButton => }/BaseButton.stories.ts (52%) create mode 100644 apps/vue-storybook/stories/BaseHeading.stories.js create mode 100644 apps/vue-storybook/stories/BaseImage.stories.ts create mode 100644 apps/vue-storybook/stories/BaseImageCaption.stories.js create mode 100644 apps/vue-storybook/stories/BaseImagePlaceholder.stories.js create mode 100644 apps/vue-storybook/stories/BlockImage.stories.js create mode 100644 apps/vue-storybook/stories/Icons.stories.ts delete mode 100644 apps/vue-storybook/stories/Icons/Icons.stories.ts create mode 100644 apps/vue-storybook/stories/MixinAnimationCaret.stories.ts delete mode 100644 apps/vue-storybook/stories/MixinAnimationCaret/MixinAnimationCaret.stories.ts create mode 100644 packages/vue/src/components/BaseHeading/BaseHeading.vue create mode 100644 packages/vue/src/components/BaseImage/BaseImage.vue create mode 100644 packages/vue/src/components/BaseImageCaption/BaseImageCaption.vue create mode 100644 packages/vue/src/components/BaseImagePlaceholder/BaseImagePlaceholder.vue create mode 100644 packages/vue/src/components/BlockImage/BlockImage.vue create mode 100644 packages/vue/src/components/BlockImage/BlockImageFullBleed.vue create mode 100644 packages/vue/src/components/BlockImage/BlockImageStandard.vue create mode 100644 packages/vue/src/components/Icons/IconArrows.vue create mode 100644 packages/vue/src/components/Icons/IconLocation.vue create mode 100644 packages/vue/src/components/Icons/IconUser.vue create mode 100644 packages/vue/src/components/LayoutHelper/LayoutHelper.vue create mode 100644 packages/vue/src/components/MixinFancybox/MixinFancybox.vue create mode 100644 packages/vue/src/components/MixinFancybox/MixinFancyboxOpenButton.vue create mode 100644 packages/vue/src/interfaces.ts diff --git a/apps/html-storybook/package.json b/apps/html-storybook/package.json index d83f4b1b..22234bfd 100644 --- a/apps/html-storybook/package.json +++ b/apps/html-storybook/package.json @@ -17,12 +17,12 @@ "prepare": "npm run prepare:clean && npm run prepare:public", "prepare:clean": "rimraf ./public/dist", "prepare:public": "cp -R ./node_modules/@explorer-1/html/dist/assets/ ./public/dist", - "storybook": "pnpm run prepare && storybook dev -c .storybook -p 6006 --ci", + "storybook": "pnpm run prepare && storybook dev -c .storybook -p 7007 --ci", "lint": "eslint .storybook", "lint:fix": "eslint .storybook --fix", "build": "pnpm run prepare && storybook build -c .storybook -o storybook_compiled", - "percy": "percy storybook http://localhost:6006", - "percy:dry-run": "percy storybook http://localhost:6006 --dry-run" + "percy": "percy storybook http://localhost:7007", + "percy:dry-run": "percy storybook http://localhost:7007 --dry-run" }, "dependencies": { "@fancyapps/ui": "^4.0.26", @@ -51,12 +51,13 @@ "autoprefixer": "^10.4.19", "npm-run-all": "^4.1.5", "postcss": "^8.4.38", + "postcss-import": "^16.1.0", "remark-gfm": "^4.0.0", "rimraf": "^5.0.5", "storybook": "^8.1.4", "tailwindcss": "^3.4.3", - "tslib": "^2.6.2", "ts-node": "^10.9.2", + "tslib": "^2.6.2", "typescript": "^5.2.2", "vite": "^5.2.11" }, diff --git a/apps/html-storybook/postcss.config.js b/apps/html-storybook/postcss.config.js index 2b75bd8a..9d55d43f 100644 --- a/apps/html-storybook/postcss.config.js +++ b/apps/html-storybook/postcss.config.js @@ -1,5 +1,6 @@ export default { plugins: { + 'postcss-import': {}, tailwindcss: {}, autoprefixer: {} } diff --git a/apps/vue-storybook/.storybook/main.ts b/apps/vue-storybook/.storybook/main.ts index 0b6eac35..6f471d89 100644 --- a/apps/vue-storybook/.storybook/main.ts +++ b/apps/vue-storybook/.storybook/main.ts @@ -7,18 +7,19 @@ const config = { options: { actions: false, backgrounds: false, - outlines: false, - }, + outlines: false + } }, '@storybook/addon-a11y', '@whitespace/storybook-addon-html', + 'storybook-addon-vue-slots' ], framework: { name: '@storybook/vue3-vite', - options: {}, + options: {} }, - docs: {}, -}; -export default config; + docs: {} +} +export default config diff --git a/apps/vue-storybook/.storybook/preview.ts b/apps/vue-storybook/.storybook/preview.ts index 61e018d7..e19b0fb7 100644 --- a/apps/vue-storybook/.storybook/preview.ts +++ b/apps/vue-storybook/.storybook/preview.ts @@ -68,10 +68,11 @@ const preview: Preview = { parameters: { controls: { - matchers: { - color: /(background|color)$/i, - date: /Date$/ - } + expanded: true + // matchers: { + // color: /(background|color)$/i, + // date: /Date$/ + // } } }, diff --git a/apps/vue-storybook/package.json b/apps/vue-storybook/package.json index 79980802..43007517 100644 --- a/apps/vue-storybook/package.json +++ b/apps/vue-storybook/package.json @@ -38,8 +38,10 @@ "msw": "^2.3.0", "msw-storybook-addon": "^2.0.2", "postcss": "^8.4.38", + "postcss-import": "^16.1.0", "rimraf": "^5.0.5", "storybook": "^8.1.4", + "storybook-addon-vue-slots": "^0.9.29", "tailwindcss": "^3.4.3", "ts-node": "^10.9.2", "typescript": "^5.2.2", diff --git a/apps/vue-storybook/postcss.config.js b/apps/vue-storybook/postcss.config.js index a9e814aa..94e5fcda 100644 --- a/apps/vue-storybook/postcss.config.js +++ b/apps/vue-storybook/postcss.config.js @@ -1,5 +1,6 @@ export default { plugins: { + 'postcss-import': {}, tailwindcss: { // config: './node_modules/@explorer-1/vue/tailwind.config.js' }, diff --git a/apps/vue-storybook/stories/BaseButton/BaseButton.stories.ts b/apps/vue-storybook/stories/BaseButton.stories.ts similarity index 52% rename from apps/vue-storybook/stories/BaseButton/BaseButton.stories.ts rename to apps/vue-storybook/stories/BaseButton.stories.ts index d44d7afe..53a0605a 100644 --- a/apps/vue-storybook/stories/BaseButton/BaseButton.stories.ts +++ b/apps/vue-storybook/stories/BaseButton.stories.ts @@ -1,14 +1,15 @@ -import type { Meta, StoryObj } from '@storybook/vue3' import BaseButton, { variants } from '@explorer-1/vue/src/components/BaseButton/BaseButton.vue' -type Story = StoryObj - -const meta: Meta = { +// TODO: add the rest of the button stories (icons, disabled, etc.) +export default { title: 'Components/Base/BaseButton', component: BaseButton, excludeStories: /.*(Data)$/, tags: ['autodocs'], parameters: { + slots: { + default: 'Default slot content' + }, docs: { description: { component: 'Simple button with several style variations.' @@ -25,9 +26,9 @@ const meta: Meta = { type: 'string', description: 'Button variant type', control: { - type: 'select', - options: Object.keys(variants) + type: 'select' }, + options: Object.keys(variants), table: { defaultValue: { summary: 'default' } } @@ -35,36 +36,30 @@ const meta: Meta = { } } -export default meta - export const BaseButtonData = { label: 'Explore', ariaLabel: 'Explore', compact: false, disabled: false, - to: '/' + to: '/', + default: 'Button' } -const Template = (args: Story) => ({ - components: { BaseButton }, - setup() { - return { args } - }, - template: 'Link Slot' -}) - -export const PrimaryButton: Story = Template.bind({}) -PrimaryButton.args = { - ...BaseButtonData, - variant: 'primary' +export const PrimaryButton = { + args: { + ...BaseButtonData, + variant: 'primary' + } } -export const SecondaryButton: Story = Template.bind({}) -SecondaryButton.args = { - ...BaseButtonData, - variant: 'secondary' +export const SecondaryButton = { + args: { + ...BaseButtonData, + variant: 'secondary' + } } -export const DarkButton: Story = Template.bind({}) -DarkButton.args = { - ...BaseButtonData, - variant: 'dark' +export const DarkButton = { + args: { + ...BaseButtonData, + variant: 'dark' + } } diff --git a/apps/vue-storybook/stories/BaseHeading.stories.js b/apps/vue-storybook/stories/BaseHeading.stories.js new file mode 100644 index 00000000..d1e1e6bb --- /dev/null +++ b/apps/vue-storybook/stories/BaseHeading.stories.js @@ -0,0 +1,75 @@ +import BaseHeading from '@explorer-1/vue/src/components/BaseHeading/BaseHeading.vue' +import IconArrows from '@explorer-1/vue/src/components/Icons/IconArrows.vue' +import IconLocation from '@explorer-1/vue/src/components/Icons/IconLocation.vue' +import IconUser from '@explorer-1/vue/src/components/Icons/IconUser.vue' + +export default { + title: 'Components/Base/BaseHeading', + component: BaseHeading, + argTypes: { + size: { + type: { name: 'string', required: true }, + description: 'The display size of the heading.', + control: { type: 'select' }, + options: ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'] + }, + level: { + type: { name: 'string', required: false }, + description: + 'The semantic heading tag if different from the display size (ex: a heading looks like an `h4`, but semantically, it is an `h1`.', + control: { type: 'select' }, + options: ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'] + } + }, + parameters: { + slots: { + default: 'Default slot content' + }, + viewMode: 'docs', + docs: { + description: { + component: + 'Base component for headings. Allows for retaining semantic markup while varying the text size.' + } + } + } +} + +// stories +export const H1 = { + name: 'H1', + args: { size: 'h1', level: 'h1', default: 'Heading 1' } +} + +export const H2 = { + name: 'H2', + args: { size: 'h2', level: 'h2', default: 'Heading 2' } +} +export const H3 = { + name: 'H3', + args: { size: 'h3', level: 'h3', default: 'Heading 3' } +} +export const H4 = { + name: 'H4', + args: { size: 'h4', level: 'h4', default: 'Heading 4' } +} +export const H5 = { + name: 'H5', + args: { size: 'h5', level: 'h5', default: 'Heading 5' } +} +export const H6 = { + name: 'H6', + args: { size: 'h6', level: 'h6', default: 'Heading 6' } +} + +const TemplateHeadingsWithIcons = (args) => ({ + components: { BaseHeading, IconArrows, IconLocation, IconUser }, + setup() { + return { args } + }, + template: + '
{{ args.default }} {{ args.default }}
{{ args.default }}' +}) + +export const HeadingsWithIcons = TemplateHeadingsWithIcons.bind({}) +HeadingsWithIcons.args = { size: 'h1', level: 'h1', default: 'Heading 1' } diff --git a/apps/vue-storybook/stories/BaseImage.stories.ts b/apps/vue-storybook/stories/BaseImage.stories.ts new file mode 100644 index 00000000..258b962c --- /dev/null +++ b/apps/vue-storybook/stories/BaseImage.stories.ts @@ -0,0 +1,52 @@ +import BaseImage, { objectFitClasses } from '@explorer-1/vue/src/components/BaseImage/BaseImage.vue' +export default { + title: 'Components/Base/BaseImage', + component: BaseImage, + excludeStories: /.*Data$/, + argTypes: { + objectFitClass: { + description: + 'Use Tailwind CSS object fit classes to specify how the image will scale within `BaseImagePlaceholder`', + control: { type: 'select' }, + options: Object.keys(objectFitClasses) + } + }, + parameters: { + docs: { + description: { + component: + 'The BaseImage component is a simple `` tag wrapped in a `
` and is used to render an image with object-fit classes and lazy loading properties.' + } + } + } +} + +export const BaseImageData = { + src: 'https://picsum.photos/800/400', + srcset: 'https://picsum.photos/800/400 800w, ', + alt: 'Alt text for image', + width: 800, + height: 400, + imageClass: '', + objectFitClass: 'contain' +} +// stories +export const Default = { + args: BaseImageData, + decorators: [() => ({ template: '
' })] +} + +export const LazyLoading = { + args: BaseImageData, + decorators: [ + () => ({ + template: + '
Scroll down and watch the network tab ⬇️
' + }) + ], + parameters: { + html: { + root: '#storyRoot' + } + } +} diff --git a/apps/vue-storybook/stories/BaseImageCaption.stories.js b/apps/vue-storybook/stories/BaseImageCaption.stories.js new file mode 100644 index 00000000..aaa4be7c --- /dev/null +++ b/apps/vue-storybook/stories/BaseImageCaption.stories.js @@ -0,0 +1,27 @@ +import BaseImageCaption from '@explorer-1/vue/src/components/BaseImageCaption/BaseImageCaption.vue' +export default { + title: 'Components/Base/BaseImageCaption', + component: BaseImageCaption, + excludeStories: /.*Data$/, + parameters: { + docs: { + description: { + component: 'Caption text used with both images and videos.' + } + } + } +} + +// data +export const BaseImageCaptionData = { + caption: + '

Aliquam finibus accumsan dapibus. In sagittis et sapien nec vehicula. Suspendisse euismod consequat risus, vel dignissim elit scelerisque sed. Nullam elit ipsum, suscipit ut quam et, molestie aliquam leo.

', + credit: 'NASA/JPL', + detailUrl: '/image-detail/slug/' +} + +export const Default = { + args: { + data: BaseImageCaptionData + } +} diff --git a/apps/vue-storybook/stories/BaseImagePlaceholder.stories.js b/apps/vue-storybook/stories/BaseImagePlaceholder.stories.js new file mode 100644 index 00000000..314f1f93 --- /dev/null +++ b/apps/vue-storybook/stories/BaseImagePlaceholder.stories.js @@ -0,0 +1,73 @@ +import BaseImage from '@explorer-1/vue/src/components/BaseImage/BaseImage.vue' +import BaseImagePlaceholder, { + aspectRatios +} from '@explorer-1/vue/src/components/BaseImagePlaceholder/BaseImagePlaceholder.vue' +export default { + title: 'Components/Base/BaseImagePlaceholder', + component: BaseImagePlaceholder, + excludeStories: /.*Data$/, + decorators: () => ({ + template: '
' + }), + tags: ['autodocs'], + parameters: { + slots: { + default: { + description: 'Slot for BaseImage', + components: { BaseImage }, + template: `` + } + }, + docs: { + description: { + component: + 'Aspect ratio CSS class. View dropdown to see all options. More classes can be added in `/src/scss/_aspect-ratios.scss`' + } + } + }, + argTypes: { + aspectRatio: { + control: { type: 'select' }, + options: Object.keys(aspectRatios) + }, + responsiveAspectRatio: { + control: { type: 'text' } + } + } +} + +// data +export const BaseImagePlaceholderData = { + aspectRatio: '12:9', + darkMode: true, + transparentMode: false +} + +export const WithImage = { + args: { + ...BaseImagePlaceholderData, + BaseImageProps: { + src: 'https://picsum.photos/1200/900', + srcset: 'https://picsum.photos/1200/900 1200w,', + alt: 'alt text for image', + width: '1200', + height: '900', + objectFitClass: 'contain', + loading: 'lazy' + } + } +} +export const NoImage = { + args: { + ...BaseImagePlaceholderData, + BaseImageProps: { + src: '', + srcset: '', + alt: '', + width: '', + height: '', + objectFitClass: 'scaleDown', + loading: '' + } + } +} diff --git a/apps/vue-storybook/stories/BaseLink.stories.ts b/apps/vue-storybook/stories/BaseLink.stories.ts index f865030f..9a098ca0 100644 --- a/apps/vue-storybook/stories/BaseLink.stories.ts +++ b/apps/vue-storybook/stories/BaseLink.stories.ts @@ -1,14 +1,18 @@ import BaseLink, { variants } from '@explorer-1/vue/src/components/BaseLink/BaseLink.vue' -// import BaseLink, { variants } from '@explorer-1/vue/src/components/BaseLink/BaseLink.vue' export default { title: 'Components/Base/BaseLink', component: BaseLink, - // argTypes: { - // variant: { - // control: { type: 'select', options: Object.keys(variants) } - // }, - // text: { control: { type: 'text' } } - // }, + parameters: { + slots: { + default: 'Default slot content' + } + }, + argTypes: { + variant: { + control: { type: 'select' }, + options: Object.keys(variants) + } + }, excludeStories: /.*Data$/ } @@ -18,30 +22,26 @@ export const BaseLinkData = { to: '/', href: '/', caret: false, - caretColor: 'text-theme-red' + caretColor: 'text-theme-red', + default: 'Link Text' } -// templates -const BaseLinkTemplate = (args) => ({ - components: { BaseLink }, - setup() { - return { args } - }, - template: `Base Link` -}) - // stories -export const Primary = BaseLinkTemplate.bind({}) -Primary.args = { ...BaseLinkData } +export const Primary = { + args: { ...BaseLinkData } +} -export const Secondary = BaseLinkTemplate.bind({}) -Secondary.args = { ...BaseLinkData, variant: 'secondary' } +export const Secondary = { + args: { ...BaseLinkData, variant: 'secondary' } +} -export const DefaultBody = BaseLinkTemplate.bind({}) -DefaultBody.args = { ...BaseLinkData, variant: 'default' } +export const DefaultBody = { + args: { ...BaseLinkData, variant: 'default' } +} -export const Unstyled = BaseLinkTemplate.bind({}) -Unstyled.args = { - ...BaseLinkData, - variant: 'none' +export const Unstyled = { + args: { + ...BaseLinkData, + variant: 'none' + } } diff --git a/apps/vue-storybook/stories/BlockImage.stories.js b/apps/vue-storybook/stories/BlockImage.stories.js new file mode 100644 index 00000000..11ba2da4 --- /dev/null +++ b/apps/vue-storybook/stories/BlockImage.stories.js @@ -0,0 +1,144 @@ +import BlockImage from '@explorer-1/vue/src/components/BlockImage/BlockImage.vue' +import BlockImageStandard from '@explorer-1/vue/src/components/BlockImage/BlockImageStandard.vue' +import BlockImageFullBleed from '@explorer-1/vue/src/components/BlockImage/BlockImageFullBleed.vue' + +export default { + title: 'Components/Blocks/BlockImage', + component: BlockImage, + argTypes: { + fullBleed: { + control: { type: 'boolean' } + } + }, + excludeStories: /.*Data$/ +} + +// shared data +export const BlockImageData = { + blockType: 'FullBleedImageBlock', + fullBleed: false, + image: { + alt: 'Fourth image', + caption: + '

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vel porttitor urna. Maecenas at est laoreet, sagittis risus a, rutrum ipsum. Quisque tincidunt lacus nunc, dapibus facilisis felis scelerisque sit amet.

', + credit: 'NASA/JPL', + detailUrl: '/image/placeholder/', + original: 'https://picsum.photos/869/700', + src: { + height: 700, + url: 'https://picsum.photos/869/700', + width: 869 + }, + srcSet: 'https://picsum.photos/320/258 320w, https://picsum.photos/869/700 1024w' + }, + imageFullBleed: { + alt: 'Fourth image', + caption: + '

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vel porttitor urna. Maecenas at est laoreet, sagittis risus a, rutrum ipsum. Quisque tincidunt lacus nunc, dapibus facilisis felis scelerisque sit amet.

', + credit: 'NASA/JPL', + detailUrl: '/image/placeholder/', + original: 'https://picsum.photos/1800/600', + src: { + width: 1800, + height: 900, + url: 'https://picsum.photos/1800/600' + }, + srcCropped: { + width: 1024, + height: 341, + url: 'https://picsum.photos/1024/341' + }, + screenXs: { + url: 'https://picsum.photos/320/107', + width: 320 + }, + screenLg: { + url: 'https://picsum.photos/1024/341', + width: 1024 + }, + screenXl: { + url: 'https://picsum.photos/1280/427', + width: 1280 + }, + screenThreexl: { + url: 'https://picsum.photos/1800/600', + width: 1800 + } + } +} + +// templates +const BlockImageTemplate = (args) => ({ + components: { BlockImage }, + setup() { + return { args } + }, + template: ` + ` +}) + +const BlockImageFullBleedTemplate = (args) => ({ + components: { BlockImageFullBleed }, + setup() { + return { args } + }, + template: ` + ` +}) +const BlockImageStandardTemplate = (args) => ({ + components: { BlockImageStandard }, + setup() { + return { args } + }, + template: ` + ` +}) + +export const StreamfieldBlock = BlockImageTemplate.bind({}) +StreamfieldBlock.args = { + data: BlockImageData, + fullBleed: BlockImageData.fullBleed +} + +export const StreamfieldBlockUnconstrainedStandard = BlockImageTemplate.bind({}) +StreamfieldBlockUnconstrainedStandard.args = { + data: { + ...BlockImageData, + constrain: false + }, + fullBleed: BlockImageData.fullBleed +} + +export const StreamfieldBlockUnconstrainedFullBleed = BlockImageTemplate.bind({}) +StreamfieldBlockUnconstrainedFullBleed.args = { + data: { + ...BlockImageData, + constrain: false + }, + fullBleed: true +} + +export const CustomCaption = BlockImageTemplate.bind({}) +CustomCaption.args = { + data: { + ...BlockImageData, + caption: '

My custom caption.

', + displayCaption: true + }, + fullBleed: BlockImageData.fullBleed +} + +export const NoCaption = BlockImageTemplate.bind({}) +NoCaption.args = { + data: { + ...BlockImageData, + displayCaption: false + }, + fullBleed: BlockImageData.fullBleed +} + +export const StandaloneFullBleed = BlockImageFullBleedTemplate.bind({}) +StandaloneFullBleed.args = { data: BlockImageData.imageFullBleed } + +export const StandaloneStandard = BlockImageStandardTemplate.bind({}) +StandaloneStandard.args = { data: BlockImageData.image } diff --git a/apps/vue-storybook/stories/Icons.stories.ts b/apps/vue-storybook/stories/Icons.stories.ts new file mode 100644 index 00000000..2bd5bf61 --- /dev/null +++ b/apps/vue-storybook/stories/Icons.stories.ts @@ -0,0 +1,42 @@ +import IconCaret from '@explorer-1/vue/src/components/Icons/IconCaret.vue' +import IconArrows from '@explorer-1/vue/src/components/Icons/IconArrows.vue' +import IconLocation from '@explorer-1/vue/src/components/Icons/IconLocation.vue' +import IconUser from '@explorer-1/vue/src/components/Icons/IconUser.vue' + +export default { + title: 'Icons', + component: IconArrows, + subcomponents: { IconArrows, IconCaret, IconUser }, + parameters: { + docs: { + description: { + component: 'Use with tailwind text classes to specify size and color' + } + } + } +} + +export const Arrows = { + render: () => ({ + components: { IconArrows }, + template: '' + }) +} +export const Caret = { + render: () => ({ + components: { IconCaret }, + template: '' + }) +} +export const Location = { + render: () => ({ + components: { IconLocation }, + template: '' + }) +} +export const User = { + render: () => ({ + components: { IconUser }, + template: '' + }) +} diff --git a/apps/vue-storybook/stories/Icons/Icons.stories.ts b/apps/vue-storybook/stories/Icons/Icons.stories.ts deleted file mode 100644 index cbda0221..00000000 --- a/apps/vue-storybook/stories/Icons/Icons.stories.ts +++ /dev/null @@ -1,26 +0,0 @@ -import IconCaret from '@explorer-1/vue/src/components/Icons/IconCaret.vue' - -export default { - title: 'Icons', - component: IconCaret, - decorators: [ - () => ({ - template: `
` - }) - ], - parameters: { - docs: { - description: { - component: 'Use with tailwind text classes to specify size and color' - } - } - } -} - -export const Caret = (args) => ({ - components: { IconCaret }, - setup() { - return { args } - }, - template: `` -}) diff --git a/apps/vue-storybook/stories/MixinAnimationCaret.stories.ts b/apps/vue-storybook/stories/MixinAnimationCaret.stories.ts new file mode 100644 index 00000000..bae2e3dd --- /dev/null +++ b/apps/vue-storybook/stories/MixinAnimationCaret.stories.ts @@ -0,0 +1,24 @@ +import MixinAnimationCaret from '@explorer-1/vue/src/components/MixinAnimationCaret/MixinAnimationCaret.vue' + +export default { + title: 'Mixins/MixinAnimationCaret', + component: MixinAnimationCaret, + parameters: { + slots: { + default: 'Default slot content' + }, + viewMode: 'docs', + docs: { + description: { + component: + 'This mixin appends an animated caret to a line of text or to more complex HTML markup. When implemented, it must be wrapped by a link element with CSS class `group` to ensure that the animation is triggered by hovering over the link. See the `BaseLink` primary variant for an implementation example.' + } + } + } +} + +export const Default = { + args: { + default: 'Text with caret' + } +} diff --git a/apps/vue-storybook/stories/MixinAnimationCaret/MixinAnimationCaret.stories.ts b/apps/vue-storybook/stories/MixinAnimationCaret/MixinAnimationCaret.stories.ts deleted file mode 100644 index af5ccda3..00000000 --- a/apps/vue-storybook/stories/MixinAnimationCaret/MixinAnimationCaret.stories.ts +++ /dev/null @@ -1,26 +0,0 @@ -import MixinAnimationCaret from '@explorer-1/vue/src/components/MixinAnimationCaret/MixinAnimationCaret.vue' - -export default { - title: 'Mixins/MixinAnimationCaret', - component: MixinAnimationCaret, - parameters: { - viewMode: 'docs', - docs: { - description: { - component: 'This component appends an animated caret to a line of text.' - } - } - } -} - -// templates -const MixinAnimationCaretTemplate = (args) => ({ - components: { MixinAnimationCaret }, - setup() { - return { args } - }, - template: `Demo of animated caret` -}) - -// stories -export const Default = MixinAnimationCaretTemplate.bind({}) diff --git a/apps/vue-storybook/tailwind.config.ts b/apps/vue-storybook/tailwind.config.ts index e61cb39b..3678332f 100644 --- a/apps/vue-storybook/tailwind.config.ts +++ b/apps/vue-storybook/tailwind.config.ts @@ -10,5 +10,5 @@ import explorer1Config from '@explorer-1/common/tailwind.config' export default { ...explorer1Config, - content: ['./node_modules/@explorer-1/vue/src/components/**/*.vue'] + content: ['stories/**/*', './node_modules/@explorer-1/vue/src/components/**/*.vue'] } diff --git a/packages/common/src/scss/_typography-theme-colors.scss b/packages/common/src/scss/_typography-theme-colors.scss index 030abd05..314f7cd1 100644 --- a/packages/common/src/scss/_typography-theme-colors.scss +++ b/packages/common/src/scss/_typography-theme-colors.scss @@ -3,35 +3,33 @@ * ex: import this file in a vue component to be able to @apply these classes */ -@layer utilities { - .text-theme-color { +.text-theme-color { + @apply text-jpl-red; +} + +.text-theme-color-hover { + @apply text-jpl-red-dark; +} + +.ThemeVariantLight { + .text-theme-color, + .hover\:text-theme-color:hover { @apply text-jpl-red; } - .text-theme-color-hover { + .text-theme-color-hover, + .hover\:text-theme-color-hover:hover { @apply text-jpl-red-dark; } +} - .ThemeVariantLight { - .text-theme-color, - .hover\:text-theme-color:hover { - @apply text-jpl-red; - } - - .text-theme-color-hover, - .hover\:text-theme-color-hover:hover { - @apply text-jpl-red-dark; - } +.ThemeVariantDark { + .text-theme-color, + .hover\:text-theme-color:hover { + @apply text-jpl-red-light; } - .ThemeVariantDark { - .text-theme-color, - .hover\:text-theme-color:hover { - @apply text-jpl-red-light; - } - - .text-theme-color-hover .hover\:text-theme-color-hover:hover { - @apply text-jpl-red; - } + .text-theme-color-hover .hover\:text-theme-color-hover:hover { + @apply text-jpl-red; } } diff --git a/packages/html/package.json b/packages/html/package.json index 9603c669..9295e3d8 100644 --- a/packages/html/package.json +++ b/packages/html/package.json @@ -38,6 +38,7 @@ "@explorer-1/prettier-config": "workspace:*", "autoprefixer": "^10.4.19", "lazysizes": "^5.3.0", + "postcss-import": "^16.1.0", "typescript": "^5.2.2", "vite": "^5.2.0" } diff --git a/packages/html/postcss.config.js b/packages/html/postcss.config.js index 2aa7205d..9d55d43f 100644 --- a/packages/html/postcss.config.js +++ b/packages/html/postcss.config.js @@ -1,6 +1,7 @@ export default { plugins: { + 'postcss-import': {}, tailwindcss: {}, - autoprefixer: {}, - }, -}; + autoprefixer: {} + } +} diff --git a/packages/vue/dist/explorer-1-vue.js b/packages/vue/dist/explorer-1-vue.js index 0286d7ad..d3bc57b7 100644 --- a/packages/vue/dist/explorer-1-vue.js +++ b/packages/vue/dist/explorer-1-vue.js @@ -1,17 +1,17 @@ -import { defineComponent as n, openBlock as o, createBlock as f, resolveDynamicComponent as d, normalizeClass as u, withCtx as c, createElementVNode as p, renderSlot as l } from "vue"; -const i = { +import { defineComponent as f, openBlock as a, createBlock as h, resolveDynamicComponent as w, normalizeClass as l, withCtx as m, createElementVNode as r, renderSlot as n, createElementBlock as d, resolveComponent as g, createVNode as $, createCommentVNode as b, createStaticVNode as L } from "vue"; +const C = { primary: "-primary", secondary: "-secondary", dark: "-dark", social: "-social" -}, h = n({ +}, B = f({ name: "BaseButton", props: { variant: { type: String, required: !1, default: "primary", - validator: (e) => Object.keys(i).includes(e) + validator: (e) => Object.keys(C).includes(e) }, compact: { type: Boolean, @@ -55,35 +55,381 @@ const i = { return this.tag === "nuxt-link" ? this.to : this.tag === "a" ? this.href : !1; }, variantClass() { - let e = i[this.variant]; + let e = C[this.variant]; return !this.$slots.default && this.$slots.icon ? e = e + " -icon-only" : this.compact && (e = e + " -compact"), this.blockClasses && (e = e + " " + this.blockClasses), e; } } -}), b = (e, t) => { - const a = e.__vccOpts || e; - for (const [s, r] of t) - a[s] = r; - return a; -}, m = { class: "label block" }; -function k(e, t, a, s, r, y) { - return o(), f(d(e.tag), { - class: u(["BaseButton text-contrast-none", e.variantClass]), +}), u = (e, t) => { + const s = e.__vccOpts || e; + for (const [o, i] of t) + s[o] = i; + return s; +}, _ = { class: "label block" }; +function S(e, t, s, o, i, p) { + return a(), h(w(e.tag), { + class: l(["BaseButton text-contrast-none", e.variantClass]), "aria-label": e.ariaLabel, disabled: e.disabled, href: e.theHref, to: e.to ? e.to : !1, - onClick: t[0] || (t[0] = (g) => e.$emit("click")) + onClick: t[0] || (t[0] = (c) => e.$emit("click")) }, { - default: c(() => [ - p("span", m, [ - l(e.$slots, "default"), - l(e.$slots, "icon") + default: m(() => [ + r("span", _, [ + n(e.$slots, "default"), + n(e.$slots, "icon") ]) ]), _: 3 }, 8, ["class", "aria-label", "disabled", "href", "to"]); } -const B = /* @__PURE__ */ b(h, [["render", k]]); +const se = /* @__PURE__ */ u(B, [["render", S]]), q = f({ + name: "IconCaret" +}), M = { + class: "IconCaret", + width: "8", + height: "14", + viewBox: "0 0 8 14", + xmlns: "http://www.w3.org/2000/svg", + "aria-hidden": "true", + focusable: "false" +}, I = /* @__PURE__ */ r("path", { + d: "M7.864 7.004L1.5 13.368.086 11.954l4.948-4.95-4.948-4.95L1.5.64l6.364 6.364z", + fill: "currentColor" +}, null, -1), z = [ + I +]; +function A(e, t, s, o, i, p) { + return a(), d("svg", M, z); +} +const W = /* @__PURE__ */ u(q, [["render", A]]), T = f({ + name: "MixinAnimationCaret", + components: { + IconCaret: W + }, + props: { + // when wrapped in a parent component i.e. BaseLink and grandparent component needs to pass a class + // appended to classes applied to .MixinAnimationCaret + passedWrapperClass: { + type: String || null, + required: !1, + default: "" + }, + // to modify spacing around the caret itself + arrowClass: { + type: String, + required: !1, + default: "" + }, + // default color class + color: { + type: String, + required: !1, + default: "text-theme-red" + }, + // default margin left class + marginLeft: { + type: String, + default: "ml-1", + required: !1 + }, + // appends .caret-inline .MixinAnimationCaret + inline: { + type: Boolean, + default: !1, + required: !1 + } + }, + computed: { + computedClass() { + let e = ""; + return this.passedWrapperClass && (e = e + " " + this.passedWrapperClass), this.inline && (e = e + " caret-inline"), e; + } + } +}), E = { class: "arrow" }, O = { class: "arrow-fixed" }; +function j(e, t, s, o, i, p) { + const c = g("IconCaret"); + return a(), d("span", { + class: l(["MixinAnimationCaret", e.computedClass]) + }, [ + r("span", null, [ + n(e.$slots, "default") + ]), + r("span", { + class: l(["arrow-wrapper", [e.arrowClass, e.color, e.marginLeft]]), + "aria-hidden": "true" + }, [ + r("span", E, [ + $(c) + ]), + r("span", O, [ + $(c) + ]) + ], 2) + ], 2); +} +const N = /* @__PURE__ */ u(T, [["render", j]]), k = { + primary: "text-subtitle text-emphasis-color hover:text-emphasis-color-dark", + secondary: "text-subtitle text-emphasis-color hover:text-emphasis-color-dark", + default: "-default underline text-emphasis-color hover:text-emphasis-color-dark", + none: "" +}, V = f({ + // this component is useful when you need a link that can either be an 'a' or router link + // falls back to a
if no url is provided + name: "BaseLink", + components: { + MixinAnimationCaret: N + }, + props: { + variant: { + type: String, + required: !1, + default: "default", + validator: (e) => Object.keys(k).includes(e) + }, + to: { + type: [String, Object], + default: void 0 + }, + exact: { + type: Boolean, + default: !1 + }, + href: { + type: String, + default: void 0 + }, + title: { + type: String, + default: void 0 + }, + ariaLabel: { + type: String, + default: "" + }, + linkClass: { + type: String, + default: "" + }, + // this will always override the target + target: { + type: String, + required: !1, + default: void 0 + }, + // if external links should open in a new window + externalTargetBlank: { + type: Boolean, + required: !1, + default: !1 + }, + // the 'primary' variant will always have the caret + caret: { + type: Boolean, + required: !1, + default: !1 + }, + // Class applied to the overall MixinAnimationCaret component + caretWrapperClass: { + type: String, + default: "" + }, + // Class applied to the caret itself + caretClass: { + type: String, + default: "" + }, + // if caret should be displayed inline with text + caretInline: { + type: Boolean, + required: !1, + default: !1 + }, + // to customize the caret color. also works with group-hover + caretColor: { + type: String, + required: !1, + default: "" + }, + caretMarginLeft: { + type: String, + required: !1, + default: "" + } + }, + emits: ["linkClicked", "specificLinkClicked"], + computed: { + computedClass() { + let e = k[this.variant]; + return (this.to || this.href) && (e = e + " cursor-pointer"), this.linkClass && (e = e + " " + this.linkClass), e; + }, + theTarget() { + if (this.target) + return this.target; + if (this.href && this.externalTargetBlank) + return "_blank"; + }, + theRel() { + if (this.theTarget === "_blank") + return "noopener"; + } + }, + methods: { + clickEvent() { + var e; + (e = this.$root) == null || e.$emit("linkClicked"), this.$emit("specificLinkClicked"); + } + } +}), H = ["href", "target", "rel", "aria-label", "title"]; +function R(e, t, s, o, i, p) { + const c = g("MixinAnimationCaret"), y = g("nuxt-link"); + return a(), d("div", null, [ + e.to ? (a(), h(y, { + key: 0, + class: l(["group", e.computedClass]), + to: e.to, + target: e.theTarget, + rel: e.theRel, + "aria-label": e.ariaLabel, + title: e.title, + exact: e.exact, + onClick: t[0] || (t[0] = (v) => e.clickEvent()) + }, { + default: m(() => [ + e.caretInline && e.caret ? (a(), h(c, { + key: 0, + inline: "", + class: l(e.caretWrapperClass), + "arrow-class": e.caretClass, + color: e.caretColor, + "margin-left": e.caretMarginLeft + }, { + default: m(() => [ + n(e.$slots, "default") + ]), + _: 3 + }, 8, ["class", "arrow-class", "color", "margin-left"])) : e.variant === "primary" || e.caret ? (a(), h(c, { + key: 1, + class: l(e.caretWrapperClass), + "arrow-class": e.caretClass, + color: e.caretColor, + "margin-left": e.caretMarginLeft + }, { + default: m(() => [ + n(e.$slots, "default") + ]), + _: 3 + }, 8, ["class", "arrow-class", "color", "margin-left"])) : n(e.$slots, "default", { key: 2 }) + ]), + _: 3 + }, 8, ["class", "to", "target", "rel", "aria-label", "title", "exact"])) : e.href ? (a(), d("a", { + key: 1, + href: e.href, + class: l(["group", e.computedClass]), + target: e.theTarget, + rel: e.theRel, + "aria-label": e.ariaLabel, + title: e.title, + onClick: t[1] || (t[1] = (v) => e.clickEvent()) + }, [ + e.caretInline && e.caret ? (a(), h(c, { + key: 0, + inline: "", + class: l(e.caretWrapperClass), + "arrow-class": e.caretClass, + color: e.caretColor, + "margin-left": e.caretMarginLeft + }, { + default: m(() => [ + n(e.$slots, "default") + ]), + _: 3 + }, 8, ["class", "arrow-class", "color", "margin-left"])) : e.variant === "primary" || e.caret ? (a(), h(c, { + key: 1, + class: l(e.caretWrapperClass), + "arrow-class": e.caretClass, + color: e.caretColor, + "margin-left": e.caretMarginLeft + }, { + default: m(() => [ + n(e.$slots, "default") + ]), + _: 3 + }, 8, ["class", "arrow-class", "color", "margin-left"])) : n(e.$slots, "default", { key: 2 }) + ], 10, H)) : b("", !0) + ]); +} +const le = /* @__PURE__ */ u(V, [["render", R]]), U = f({ + name: "IconArrows" +}), D = { + class: "IconArrows", + width: "32", + height: "12", + viewBox: "0 0 32 12", + xmlns: "http://www.w3.org/2000/svg", + "aria-hidden": "true", + focusable: "false" +}, F = /* @__PURE__ */ L('', 1), G = [ + F +]; +function J(e, t, s, o, i, p) { + return a(), d("svg", D, G); +} +const ne = /* @__PURE__ */ u(U, [["render", J]]), K = f({ + name: "IconLocation" +}), P = { + class: "IconLocation", + width: "16", + height: "22", + viewBox: "0 0 16 22", + xmlns: "http://www.w3.org/2000/svg", + "aria-hidden": "true", + focusable: "false" +}, Q = /* @__PURE__ */ r("g", { + transform: "translate(-4 -1)", + stroke: "currentColor", + "stroke-width": "2", + fill: "none" +}, [ + /* @__PURE__ */ r("path", { d: "M12 2c1.933 0 3.683.784 4.95 2.05A6.978 6.978 0 0119 9c0 2.681-2.41 6.81-7 12.43C7.41 15.81 5 11.68 5 9c0-1.933.784-3.683 2.05-4.95A6.978 6.978 0 0112 2z" }), + /* @__PURE__ */ r("circle", { + cx: "12", + cy: "9", + r: "3" + }) +], -1), X = [ + Q +]; +function Y(e, t, s, o, i, p) { + return a(), d("svg", P, X); +} +const oe = /* @__PURE__ */ u(K, [["render", Y]]), Z = f({ + name: "IconArrows" +}), x = { + class: "IconUser", + width: "21", + height: "21", + viewBox: "0 0 21 21", + xmlns: "http://www.w3.org/2000/svg", + "aria-hidden": "true", + focusable: "false" +}, ee = /* @__PURE__ */ r("path", { + d: "M10.5 0C4.7 0 0 4.7 0 10.5S4.7 21 10.5 21 21 16.3 21 10.5 16.3 0 10.5 0zm5.42 17.867c-1.525 1.143-3.43 1.778-5.42 1.778-2.032 0-3.938-.635-5.42-1.778v-.593a2.701 2.701 0 0 1 2.71-2.71c.466 0 1.143.509 2.71.509 1.524 0 2.202-.508 2.71-.508a2.729 2.729 0 0 1 2.71 2.71v.592zm1.27-1.143c-.297-1.99-1.948-3.514-3.98-3.514-.89 0-1.313.508-2.71.508-1.44 0-1.863-.508-2.71-.508-2.074 0-3.725 1.524-4.022 3.514-1.524-1.651-2.413-3.81-2.413-6.224A9.134 9.134 0 0 1 10.5 1.355c5.038 0 9.145 4.107 9.145 9.145 0 2.413-.931 4.573-2.456 6.224zM10.5 4.742a3.731 3.731 0 0 0-3.726 3.726 3.704 3.704 0 0 0 3.726 3.726 3.731 3.731 0 0 0 3.726-3.726c0-2.033-1.694-3.726-3.726-3.726zm0 6.097a2.367 2.367 0 0 1-2.371-2.371c0-1.27 1.059-2.371 2.371-2.371 1.27 0 2.371 1.1 2.371 2.37 0 1.313-1.1 2.372-2.371 2.372z", + fill: "currentColor" +}, null, -1), te = [ + ee +]; +function ae(e, t, s, o, i, p) { + return a(), d("svg", x, te); +} +const ie = /* @__PURE__ */ u(Z, [["render", ae]]); export { - B as BaseButton + se as BaseButton, + se as BaseHeading, + le as BaseLink, + ne as IconArrows, + W as IconCaret, + oe as IconLocation, + ie as IconUser, + N as MixinAnimationCaret }; diff --git a/packages/vue/dist/explorer-1-vue.umd.cjs b/packages/vue/dist/explorer-1-vue.umd.cjs index 3b71597f..76739a7c 100644 --- a/packages/vue/dist/explorer-1-vue.umd.cjs +++ b/packages/vue/dist/explorer-1-vue.umd.cjs @@ -1 +1 @@ -(function(s,t){typeof exports=="object"&&typeof module<"u"?t(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],t):(s=typeof globalThis<"u"?globalThis:s||self,t(s.Explorer1Vue={},s.Vue))})(this,function(s,t){"use strict";const i={primary:"-primary",secondary:"-secondary",dark:"-dark",social:"-social"},o=t.defineComponent({name:"BaseButton",props:{variant:{type:String,required:!1,default:"primary",validator:e=>Object.keys(i).includes(e)},compact:{type:Boolean,default:!1,required:!1},blockClasses:{type:String,required:!1,default:"inline-block"},disabled:{type:Boolean,default:!1,required:!1},ariaLabel:{type:String,default:"",required:!1},to:{type:[String,Object],required:!1,default:null},href:{type:String,required:!1,default:null}},emits:["click"],computed:{tag(){return this.disabled?"button":this.to?"nuxt-link":this.href?"a":"button"},theHref(){return this.tag==="nuxt-link"?this.to:this.tag==="a"?this.href:!1},variantClass(){let e=i[this.variant];return!this.$slots.default&&this.$slots.icon?e=e+" -icon-only":this.compact&&(e=e+" -compact"),this.blockClasses&&(e=e+" "+this.blockClasses),e}}}),f=(e,a)=>{const r=e.__vccOpts||e;for(const[n,l]of a)r[n]=l;return r},d={class:"label block"};function u(e,a,r,n,l,p){return t.openBlock(),t.createBlock(t.resolveDynamicComponent(e.tag),{class:t.normalizeClass(["BaseButton text-contrast-none",e.variantClass]),"aria-label":e.ariaLabel,disabled:e.disabled,href:e.theHref,to:e.to?e.to:!1,onClick:a[0]||(a[0]=h=>e.$emit("click"))},{default:t.withCtx(()=>[t.createElementVNode("span",d,[t.renderSlot(e.$slots,"default"),t.renderSlot(e.$slots,"icon")])]),_:3},8,["class","aria-label","disabled","href","to"])}const c=f(o,[["render",u]]);s.BaseButton=c,Object.defineProperty(s,Symbol.toStringTag,{value:"Module"})}); +(function(a,t){typeof exports=="object"&&typeof module<"u"?t(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],t):(a=typeof globalThis<"u"?globalThis:a||self,t(a.Explorer1Vue={},a.Vue))})(this,function(a,t){"use strict";const d={primary:"-primary",secondary:"-secondary",dark:"-dark",social:"-social"},u=t.defineComponent({name:"BaseButton",props:{variant:{type:String,required:!1,default:"primary",validator:e=>Object.keys(d).includes(e)},compact:{type:Boolean,default:!1,required:!1},blockClasses:{type:String,required:!1,default:"inline-block"},disabled:{type:Boolean,default:!1,required:!1},ariaLabel:{type:String,default:"",required:!1},to:{type:[String,Object],required:!1,default:null},href:{type:String,required:!1,default:null}},emits:["click"],computed:{tag(){return this.disabled?"button":this.to?"nuxt-link":this.href?"a":"button"},theHref(){return this.tag==="nuxt-link"?this.to:this.tag==="a"?this.href:!1},variantClass(){let e=d[this.variant];return!this.$slots.default&&this.$slots.icon?e=e+" -icon-only":this.compact&&(e=e+" -compact"),this.blockClasses&&(e=e+" "+this.blockClasses),e}}}),i=(e,r)=>{const s=e.__vccOpts||e;for(const[n,o]of r)s[n]=o;return s},C={class:"label block"};function k(e,r,s,n,o,c){return t.openBlock(),t.createBlock(t.resolveDynamicComponent(e.tag),{class:t.normalizeClass(["BaseButton text-contrast-none",e.variantClass]),"aria-label":e.ariaLabel,disabled:e.disabled,href:e.theHref,to:e.to?e.to:!1,onClick:r[0]||(r[0]=l=>e.$emit("click"))},{default:t.withCtx(()=>[t.createElementVNode("span",C,[t.renderSlot(e.$slots,"default"),t.renderSlot(e.$slots,"icon")])]),_:3},8,["class","aria-label","disabled","href","to"])}const f=i(u,[["render",k]]),g=t.defineComponent({name:"IconCaret"}),$={class:"IconCaret",width:"8",height:"14",viewBox:"0 0 8 14",xmlns:"http://www.w3.org/2000/svg","aria-hidden":"true",focusable:"false"},y=[t.createElementVNode("path",{d:"M7.864 7.004L1.5 13.368.086 11.954l4.948-4.95-4.948-4.95L1.5.64l6.364 6.364z",fill:"currentColor"},null,-1)];function B(e,r,s,n,o,c){return t.openBlock(),t.createElementBlock("svg",$,y)}const p=i(g,[["render",B]]),w=t.defineComponent({name:"MixinAnimationCaret",components:{IconCaret:p},props:{passedWrapperClass:{type:String||null,required:!1,default:""},arrowClass:{type:String,required:!1,default:""},color:{type:String,required:!1,default:"text-theme-red"},marginLeft:{type:String,default:"ml-1",required:!1},inline:{type:Boolean,default:!1,required:!1}},computed:{computedClass(){let e="";return this.passedWrapperClass&&(e=e+" "+this.passedWrapperClass),this.inline&&(e=e+" caret-inline"),e}}}),b={class:"arrow"},S={class:"arrow-fixed"};function _(e,r,s,n,o,c){const l=t.resolveComponent("IconCaret");return t.openBlock(),t.createElementBlock("span",{class:t.normalizeClass(["MixinAnimationCaret",e.computedClass])},[t.createElementVNode("span",null,[t.renderSlot(e.$slots,"default")]),t.createElementVNode("span",{class:t.normalizeClass(["arrow-wrapper",[e.arrowClass,e.color,e.marginLeft]]),"aria-hidden":"true"},[t.createElementVNode("span",b,[t.createVNode(l)]),t.createElementVNode("span",S,[t.createVNode(l)])],2)],2)}const h=i(w,[["render",_]]),m={primary:"text-subtitle text-emphasis-color hover:text-emphasis-color-dark",secondary:"text-subtitle text-emphasis-color hover:text-emphasis-color-dark",default:"-default underline text-emphasis-color hover:text-emphasis-color-dark",none:""},L=t.defineComponent({name:"BaseLink",components:{MixinAnimationCaret:h},props:{variant:{type:String,required:!1,default:"default",validator:e=>Object.keys(m).includes(e)},to:{type:[String,Object],default:void 0},exact:{type:Boolean,default:!1},href:{type:String,default:void 0},title:{type:String,default:void 0},ariaLabel:{type:String,default:""},linkClass:{type:String,default:""},target:{type:String,required:!1,default:void 0},externalTargetBlank:{type:Boolean,required:!1,default:!1},caret:{type:Boolean,required:!1,default:!1},caretWrapperClass:{type:String,default:""},caretClass:{type:String,default:""},caretInline:{type:Boolean,required:!1,default:!1},caretColor:{type:String,required:!1,default:""},caretMarginLeft:{type:String,required:!1,default:""}},emits:["linkClicked","specificLinkClicked"],computed:{computedClass(){let e=m[this.variant];return(this.to||this.href)&&(e=e+" cursor-pointer"),this.linkClass&&(e=e+" "+this.linkClass),e},theTarget(){if(this.target)return this.target;if(this.href&&this.externalTargetBlank)return"_blank"},theRel(){if(this.theTarget==="_blank")return"noopener"}},methods:{clickEvent(){var e;(e=this.$root)==null||e.$emit("linkClicked"),this.$emit("specificLinkClicked")}}}),E=["href","target","rel","aria-label","title"];function I(e,r,s,n,o,c){const l=t.resolveComponent("MixinAnimationCaret"),G=t.resolveComponent("nuxt-link");return t.openBlock(),t.createElementBlock("div",null,[e.to?(t.openBlock(),t.createBlock(G,{key:0,class:t.normalizeClass(["group",e.computedClass]),to:e.to,target:e.theTarget,rel:e.theRel,"aria-label":e.ariaLabel,title:e.title,exact:e.exact,onClick:r[0]||(r[0]=J=>e.clickEvent())},{default:t.withCtx(()=>[e.caretInline&&e.caret?(t.openBlock(),t.createBlock(l,{key:0,inline:"",class:t.normalizeClass(e.caretWrapperClass),"arrow-class":e.caretClass,color:e.caretColor,"margin-left":e.caretMarginLeft},{default:t.withCtx(()=>[t.renderSlot(e.$slots,"default")]),_:3},8,["class","arrow-class","color","margin-left"])):e.variant==="primary"||e.caret?(t.openBlock(),t.createBlock(l,{key:1,class:t.normalizeClass(e.caretWrapperClass),"arrow-class":e.caretClass,color:e.caretColor,"margin-left":e.caretMarginLeft},{default:t.withCtx(()=>[t.renderSlot(e.$slots,"default")]),_:3},8,["class","arrow-class","color","margin-left"])):t.renderSlot(e.$slots,"default",{key:2})]),_:3},8,["class","to","target","rel","aria-label","title","exact"])):e.href?(t.openBlock(),t.createElementBlock("a",{key:1,href:e.href,class:t.normalizeClass(["group",e.computedClass]),target:e.theTarget,rel:e.theRel,"aria-label":e.ariaLabel,title:e.title,onClick:r[1]||(r[1]=J=>e.clickEvent())},[e.caretInline&&e.caret?(t.openBlock(),t.createBlock(l,{key:0,inline:"",class:t.normalizeClass(e.caretWrapperClass),"arrow-class":e.caretClass,color:e.caretColor,"margin-left":e.caretMarginLeft},{default:t.withCtx(()=>[t.renderSlot(e.$slots,"default")]),_:3},8,["class","arrow-class","color","margin-left"])):e.variant==="primary"||e.caret?(t.openBlock(),t.createBlock(l,{key:1,class:t.normalizeClass(e.caretWrapperClass),"arrow-class":e.caretClass,color:e.caretColor,"margin-left":e.caretMarginLeft},{default:t.withCtx(()=>[t.renderSlot(e.$slots,"default")]),_:3},8,["class","arrow-class","color","margin-left"])):t.renderSlot(e.$slots,"default",{key:2})],10,E)):t.createCommentVNode("",!0)])}const q=i(L,[["render",I]]),z=t.defineComponent({name:"IconArrows"}),M={class:"IconArrows",width:"32",height:"12",viewBox:"0 0 32 12",xmlns:"http://www.w3.org/2000/svg","aria-hidden":"true",focusable:"false"},V=[t.createStaticVNode('',1)];function A(e,r,s,n,o,c){return t.openBlock(),t.createElementBlock("svg",M,V)}const N=i(z,[["render",A]]),T=t.defineComponent({name:"IconLocation"}),W={class:"IconLocation",width:"16",height:"22",viewBox:"0 0 16 22",xmlns:"http://www.w3.org/2000/svg","aria-hidden":"true",focusable:"false"},j=[t.createElementVNode("g",{transform:"translate(-4 -1)",stroke:"currentColor","stroke-width":"2",fill:"none"},[t.createElementVNode("path",{d:"M12 2c1.933 0 3.683.784 4.95 2.05A6.978 6.978 0 0119 9c0 2.681-2.41 6.81-7 12.43C7.41 15.81 5 11.68 5 9c0-1.933.784-3.683 2.05-4.95A6.978 6.978 0 0112 2z"}),t.createElementVNode("circle",{cx:"12",cy:"9",r:"3"})],-1)];function O(e,r,s,n,o,c){return t.openBlock(),t.createElementBlock("svg",W,j)}const H=i(T,[["render",O]]),R=t.defineComponent({name:"IconArrows"}),U={class:"IconUser",width:"21",height:"21",viewBox:"0 0 21 21",xmlns:"http://www.w3.org/2000/svg","aria-hidden":"true",focusable:"false"},D=[t.createElementVNode("path",{d:"M10.5 0C4.7 0 0 4.7 0 10.5S4.7 21 10.5 21 21 16.3 21 10.5 16.3 0 10.5 0zm5.42 17.867c-1.525 1.143-3.43 1.778-5.42 1.778-2.032 0-3.938-.635-5.42-1.778v-.593a2.701 2.701 0 0 1 2.71-2.71c.466 0 1.143.509 2.71.509 1.524 0 2.202-.508 2.71-.508a2.729 2.729 0 0 1 2.71 2.71v.592zm1.27-1.143c-.297-1.99-1.948-3.514-3.98-3.514-.89 0-1.313.508-2.71.508-1.44 0-1.863-.508-2.71-.508-2.074 0-3.725 1.524-4.022 3.514-1.524-1.651-2.413-3.81-2.413-6.224A9.134 9.134 0 0 1 10.5 1.355c5.038 0 9.145 4.107 9.145 9.145 0 2.413-.931 4.573-2.456 6.224zM10.5 4.742a3.731 3.731 0 0 0-3.726 3.726 3.704 3.704 0 0 0 3.726 3.726 3.731 3.731 0 0 0 3.726-3.726c0-2.033-1.694-3.726-3.726-3.726zm0 6.097a2.367 2.367 0 0 1-2.371-2.371c0-1.27 1.059-2.371 2.371-2.371 1.27 0 2.371 1.1 2.371 2.37 0 1.313-1.1 2.372-2.371 2.372z",fill:"currentColor"},null,-1)];function P(e,r,s,n,o,c){return t.openBlock(),t.createElementBlock("svg",U,D)}const F=i(R,[["render",P]]);a.BaseButton=f,a.BaseHeading=f,a.BaseLink=q,a.IconArrows=N,a.IconCaret=p,a.IconLocation=H,a.IconUser=F,a.MixinAnimationCaret=h,Object.defineProperty(a,Symbol.toStringTag,{value:"Module"})}); diff --git a/packages/vue/dist/style.css b/packages/vue/dist/style.css index e9470931..32beff34 100644 --- a/packages/vue/dist/style.css +++ b/packages/vue/dist/style.css @@ -1 +1 @@ -@charset "UTF-8";.BaseButton{padding-top:.7em;padding-bottom:.7em;background-size:100% 215%;background-position:0 -1px;cursor:pointer;background-image:linear-gradient(to bottom,var(--tw-gradient-stops));--tw-gradient-from: var(--gradientColorStops-transparent-w50) var(--tw-gradient-from-position);--tw-gradient-to: rgb(255 255 255 / 0) var(--tw-gradient-to-position);--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);font-family:Archivo Narrow,Metropolis,-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;font-weight:600;text-transform:uppercase;line-height:1.5;letter-spacing:1px;transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.2s;transition-timing-function:linear}.BaseButton:focus{outline:2px solid transparent;outline-offset:2px;--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow, 0 0 #0000)}.BaseButton>.label{display:flex;align-items:center;justify-content:center}@media (hover: hover){.BaseButton:hover{background-position:bottom}}.BaseButton.-primary{--tw-bg-opacity: 1;background-color:rgb(var(--colors-action-color) / var(--tw-bg-opacity));--tw-gradient-to: var(--gradientColorStops-action-color-dark-w50) var(--tw-gradient-to-position);padding-left:3rem;padding-right:3rem;--tw-text-opacity: 1;color:rgb(var(--colors-white) / var(--tw-text-opacity))}.BaseButton.-primary>.label{border-width:2px;border-color:rgb(var(--colors-transparent) / 0)}.BaseButton.-secondary{border-width:2px;--tw-border-opacity: 1;border-color:rgb(var(--colors-action-color) / var(--tw-border-opacity));background-color:rgb(var(--colors-transparent) / 0);--tw-gradient-to: var(--gradientColorStops-action-color-dark-w50) var(--tw-gradient-to-position);padding-left:3rem;padding-right:3rem;--tw-text-opacity: 1;color:rgb(var(--colors-action-color) / var(--tw-text-opacity))}@media (hover: hover){.BaseButton.-secondary:hover{--tw-border-opacity: 1;border-color:rgb(var(--colors-action-color-dark) / var(--tw-border-opacity));--tw-text-opacity: 1;color:rgb(var(--colors-white) / var(--tw-text-opacity))}}.BaseButton.-dark{border-width:1px;border-color:rgb(var(--colors-white) / .4);background-color:rgb(var(--colors-transparent) / 0);--tw-gradient-to: var(--gradientColorStops-white-w50) var(--tw-gradient-to-position);padding-left:3rem;padding-right:3rem;--tw-text-opacity: 1;color:rgb(var(--colors-white) / var(--tw-text-opacity))}@media (hover: hover){.BaseButton.-dark:hover{--tw-border-opacity: 1;border-color:rgb(var(--colors-white) / var(--tw-border-opacity));--tw-bg-opacity: 1;background-color:rgb(var(--colors-white) / var(--tw-bg-opacity));--tw-text-opacity: 1;color:rgb(var(--colors-dark-blue) / var(--tw-text-opacity))}}.BaseButton.-social{border-width:1px;--tw-border-opacity: 1;border-color:rgb(var(--colors-gray-mid) / var(--tw-border-opacity));background-color:rgb(var(--colors-transparent) / 0);--tw-gradient-to: var(--gradientColorStops-gray-dark-w50) var(--tw-gradient-to-position);padding-left:3rem;padding-right:3rem;--tw-text-opacity: 1;color:rgb(var(--colors-gray-mid) / var(--tw-text-opacity))}@media (hover: hover){.BaseButton.-social:hover{--tw-bg-opacity: 1;background-color:rgb(var(--colors-gray-dark) / var(--tw-bg-opacity));--tw-text-opacity: 1;color:rgb(var(--colors-white) / var(--tw-text-opacity))}}.BaseButton.-social.-facebook{--tw-gradient-to: var(--gradientColorStops-facebook-w50) var(--tw-gradient-to-position)}@media (hover: hover){.BaseButton.-social.-facebook:hover{--tw-border-opacity: 1;border-color:rgb(var(--colors-facebook) / var(--tw-border-opacity));--tw-bg-opacity: 1;background-color:rgb(var(--colors-facebook) / var(--tw-bg-opacity))}}.BaseButton.-social.-twitter{--tw-gradient-to: var(--gradientColorStops-twitter-w50) var(--tw-gradient-to-position)}@media (hover: hover){.BaseButton.-social.-twitter:hover{--tw-border-opacity: 1;border-color:rgb(var(--colors-twitter) / var(--tw-border-opacity));--tw-bg-opacity: 1;background-color:rgb(var(--colors-twitter) / var(--tw-bg-opacity))}}.BaseButton.-social.-instagram{--tw-gradient-to: var(--gradientColorStops-instagram-w50) var(--tw-gradient-to-position)}@media (hover: hover){.BaseButton.-social.-instagram:hover{--tw-border-opacity: 1;border-color:rgb(var(--colors-instagram) / var(--tw-border-opacity));--tw-bg-opacity: 1;background-color:rgb(var(--colors-instagram) / var(--tw-bg-opacity))}}.BaseButton.-social.-youtube{--tw-gradient-to: var(--gradientColorStops-youtube-w50) var(--tw-gradient-to-position)}@media (hover: hover){.BaseButton.-social.-youtube:hover{--tw-border-opacity: 1;border-color:rgb(var(--colors-youtube) / var(--tw-border-opacity));--tw-bg-opacity: 1;background-color:rgb(var(--colors-youtube) / var(--tw-bg-opacity))}}.BaseButton.-social.-reddit{--tw-gradient-to: var(--gradientColorStops-reddit-w50) var(--tw-gradient-to-position)}@media (hover: hover){.BaseButton.-social.-reddit:hover{--tw-border-opacity: 1;border-color:rgb(var(--colors-reddit) / var(--tw-border-opacity));--tw-bg-opacity: 1;background-color:rgb(var(--colors-reddit) / var(--tw-bg-opacity))}}.BaseButton.-compact{padding-left:1.25rem;padding-right:1.25rem}.BaseButton.-icon-only{padding:0}.BaseButton.-icon-only>.label{display:flex;height:100%;width:100%;align-items:center;justify-content:center}.BaseButton:disabled{cursor:default!important;--tw-border-opacity: 1 !important;border-color:rgb(var(--colors-gray-mid) / var(--tw-border-opacity))!important;--tw-bg-opacity: 1 !important;background-color:rgb(var(--colors-gray-mid) / var(--tw-bg-opacity))!important;background-image:none!important}.BaseButton:disabled>.label{--tw-text-opacity: 1;color:rgb(var(--colors-white) / var(--tw-text-opacity))}.ThemeVariantLight .BaseButton.-primary{--tw-bg-opacity: 1;background-color:rgb(var(--colors-action-color) / var(--tw-bg-opacity));--tw-gradient-to: var(--gradientColorStops-action-color-dark-w50) var(--tw-gradient-to-position);--tw-text-opacity: 1;color:rgb(var(--colors-white) / var(--tw-text-opacity))}.ThemeVariantLight .BaseButton.-secondary{--tw-border-opacity: 1;border-color:rgb(var(--colors-action-color) / var(--tw-border-opacity));background-color:rgb(var(--colors-transparent) / 0);--tw-gradient-to: var(--gradientColorStops-action-color-dark-w50) var(--tw-gradient-to-position);--tw-text-opacity: 1;color:rgb(var(--colors-action-color) / var(--tw-text-opacity))}@media (hover: hover){.ThemeVariantLight .BaseButton.-secondary:hover{--tw-border-opacity: 1;border-color:rgb(var(--colors-action-color-dark) / var(--tw-border-opacity));--tw-bg-opacity: 1;background-color:rgb(var(--colors-action-color-dark) / var(--tw-bg-opacity));--tw-text-opacity: 1;color:rgb(var(--colors-white) / var(--tw-text-opacity))}}.ThemeVariantDark .BaseButton.-primary{--tw-bg-opacity: 1;background-color:rgb(var(--colors-action-color-light) / var(--tw-bg-opacity));--tw-gradient-to: var(--gradientColorStops-action-color-w50) var(--tw-gradient-to-position);--tw-text-opacity: 1;color:rgb(var(--colors-white) / var(--tw-text-opacity))}.ThemeVariantDark .BaseButton.-secondary{--tw-border-opacity: 1;border-color:rgb(var(--colors-action-color-light) / var(--tw-border-opacity));background-color:rgb(var(--colors-transparent) / 0);--tw-gradient-to: var(--gradientColorStops-action-color-w50) var(--tw-gradient-to-position);--tw-text-opacity: 1;color:rgb(var(--colors-action-color-light) / var(--tw-text-opacity))}@media (hover: hover){.ThemeVariantDark .BaseButton.-secondary:hover{--tw-border-opacity: 1;border-color:rgb(var(--colors-action-color) / var(--tw-border-opacity));--tw-bg-opacity: 1;background-color:rgb(var(--colors-action-color) / var(--tw-bg-opacity));--tw-text-opacity: 1;color:rgb(var(--colors-white) / var(--tw-text-opacity))}} +@charset "UTF-8";.BaseButton{padding-top:.7em;padding-bottom:.7em;background-size:100% 215%;background-position:0 -1px;cursor:pointer;background-image:linear-gradient(to bottom,var(--tw-gradient-stops));--tw-gradient-from: var(--gradientColorStops-transparent-w50) var(--tw-gradient-from-position);--tw-gradient-to: rgb(255 255 255 / 0) var(--tw-gradient-to-position);--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);font-family:Archivo Narrow,Metropolis,-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;font-weight:600;text-transform:uppercase;line-height:1.5;letter-spacing:1px;transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.2s;transition-timing-function:linear}.BaseButton:focus{outline:2px solid transparent;outline-offset:2px;--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow, 0 0 #0000)}.BaseButton>.label{display:flex;align-items:center;justify-content:center}@media (hover: hover){.BaseButton:hover{background-position:bottom}}.BaseButton.-primary{--tw-bg-opacity: 1;background-color:rgb(var(--colors-action-color) / var(--tw-bg-opacity));--tw-gradient-to: var(--gradientColorStops-action-color-dark-w50) var(--tw-gradient-to-position);padding-left:3rem;padding-right:3rem;--tw-text-opacity: 1;color:rgb(var(--colors-white) / var(--tw-text-opacity))}.BaseButton.-primary>.label{border-width:2px;border-color:rgb(var(--colors-transparent) / 0)}.BaseButton.-secondary{border-width:2px;--tw-border-opacity: 1;border-color:rgb(var(--colors-action-color) / var(--tw-border-opacity));background-color:rgb(var(--colors-transparent) / 0);--tw-gradient-to: var(--gradientColorStops-action-color-dark-w50) var(--tw-gradient-to-position);padding-left:3rem;padding-right:3rem;--tw-text-opacity: 1;color:rgb(var(--colors-action-color) / var(--tw-text-opacity))}@media (hover: hover){.BaseButton.-secondary:hover{--tw-border-opacity: 1;border-color:rgb(var(--colors-action-color-dark) / var(--tw-border-opacity));--tw-text-opacity: 1;color:rgb(var(--colors-white) / var(--tw-text-opacity))}}.BaseButton.-dark{border-width:1px;border-color:rgb(var(--colors-white) / .4);background-color:rgb(var(--colors-transparent) / 0);--tw-gradient-to: var(--gradientColorStops-white-w50) var(--tw-gradient-to-position);padding-left:3rem;padding-right:3rem;--tw-text-opacity: 1;color:rgb(var(--colors-white) / var(--tw-text-opacity))}@media (hover: hover){.BaseButton.-dark:hover{--tw-border-opacity: 1;border-color:rgb(var(--colors-white) / var(--tw-border-opacity));--tw-bg-opacity: 1;background-color:rgb(var(--colors-white) / var(--tw-bg-opacity));--tw-text-opacity: 1;color:rgb(var(--colors-dark-blue) / var(--tw-text-opacity))}}.BaseButton.-social{border-width:1px;--tw-border-opacity: 1;border-color:rgb(var(--colors-gray-mid) / var(--tw-border-opacity));background-color:rgb(var(--colors-transparent) / 0);--tw-gradient-to: var(--gradientColorStops-gray-dark-w50) var(--tw-gradient-to-position);padding-left:3rem;padding-right:3rem;--tw-text-opacity: 1;color:rgb(var(--colors-gray-mid) / var(--tw-text-opacity))}@media (hover: hover){.BaseButton.-social:hover{--tw-bg-opacity: 1;background-color:rgb(var(--colors-gray-dark) / var(--tw-bg-opacity));--tw-text-opacity: 1;color:rgb(var(--colors-white) / var(--tw-text-opacity))}}.BaseButton.-social.-facebook{--tw-gradient-to: var(--gradientColorStops-facebook-w50) var(--tw-gradient-to-position)}@media (hover: hover){.BaseButton.-social.-facebook:hover{--tw-border-opacity: 1;border-color:rgb(var(--colors-facebook) / var(--tw-border-opacity));--tw-bg-opacity: 1;background-color:rgb(var(--colors-facebook) / var(--tw-bg-opacity))}}.BaseButton.-social.-twitter{--tw-gradient-to: var(--gradientColorStops-twitter-w50) var(--tw-gradient-to-position)}@media (hover: hover){.BaseButton.-social.-twitter:hover{--tw-border-opacity: 1;border-color:rgb(var(--colors-twitter) / var(--tw-border-opacity));--tw-bg-opacity: 1;background-color:rgb(var(--colors-twitter) / var(--tw-bg-opacity))}}.BaseButton.-social.-instagram{--tw-gradient-to: var(--gradientColorStops-instagram-w50) var(--tw-gradient-to-position)}@media (hover: hover){.BaseButton.-social.-instagram:hover{--tw-border-opacity: 1;border-color:rgb(var(--colors-instagram) / var(--tw-border-opacity));--tw-bg-opacity: 1;background-color:rgb(var(--colors-instagram) / var(--tw-bg-opacity))}}.BaseButton.-social.-youtube{--tw-gradient-to: var(--gradientColorStops-youtube-w50) var(--tw-gradient-to-position)}@media (hover: hover){.BaseButton.-social.-youtube:hover{--tw-border-opacity: 1;border-color:rgb(var(--colors-youtube) / var(--tw-border-opacity));--tw-bg-opacity: 1;background-color:rgb(var(--colors-youtube) / var(--tw-bg-opacity))}}.BaseButton.-social.-reddit{--tw-gradient-to: var(--gradientColorStops-reddit-w50) var(--tw-gradient-to-position)}@media (hover: hover){.BaseButton.-social.-reddit:hover{--tw-border-opacity: 1;border-color:rgb(var(--colors-reddit) / var(--tw-border-opacity));--tw-bg-opacity: 1;background-color:rgb(var(--colors-reddit) / var(--tw-bg-opacity))}}.BaseButton.-compact{padding-left:1.25rem;padding-right:1.25rem}.BaseButton.-icon-only{padding:0}.BaseButton.-icon-only>.label{display:flex;height:100%;width:100%;align-items:center;justify-content:center}.BaseButton:disabled{cursor:default!important;--tw-border-opacity: 1 !important;border-color:rgb(var(--colors-gray-mid) / var(--tw-border-opacity))!important;--tw-bg-opacity: 1 !important;background-color:rgb(var(--colors-gray-mid) / var(--tw-bg-opacity))!important;background-image:none!important}.BaseButton:disabled>.label{--tw-text-opacity: 1;color:rgb(var(--colors-white) / var(--tw-text-opacity))}.ThemeVariantLight .BaseButton.-primary{--tw-bg-opacity: 1;background-color:rgb(var(--colors-action-color) / var(--tw-bg-opacity));--tw-gradient-to: var(--gradientColorStops-action-color-dark-w50) var(--tw-gradient-to-position);--tw-text-opacity: 1;color:rgb(var(--colors-white) / var(--tw-text-opacity))}.ThemeVariantLight .BaseButton.-secondary{--tw-border-opacity: 1;border-color:rgb(var(--colors-action-color) / var(--tw-border-opacity));background-color:rgb(var(--colors-transparent) / 0);--tw-gradient-to: var(--gradientColorStops-action-color-dark-w50) var(--tw-gradient-to-position);--tw-text-opacity: 1;color:rgb(var(--colors-action-color) / var(--tw-text-opacity))}@media (hover: hover){.ThemeVariantLight .BaseButton.-secondary:hover{--tw-border-opacity: 1;border-color:rgb(var(--colors-action-color-dark) / var(--tw-border-opacity));--tw-bg-opacity: 1;background-color:rgb(var(--colors-action-color-dark) / var(--tw-bg-opacity));--tw-text-opacity: 1;color:rgb(var(--colors-white) / var(--tw-text-opacity))}}.ThemeVariantDark .BaseButton.-primary{--tw-bg-opacity: 1;background-color:rgb(var(--colors-action-color-light) / var(--tw-bg-opacity));--tw-gradient-to: var(--gradientColorStops-action-color-w50) var(--tw-gradient-to-position);--tw-text-opacity: 1;color:rgb(var(--colors-white) / var(--tw-text-opacity))}.ThemeVariantDark .BaseButton.-secondary{--tw-border-opacity: 1;border-color:rgb(var(--colors-action-color-light) / var(--tw-border-opacity));background-color:rgb(var(--colors-transparent) / 0);--tw-gradient-to: var(--gradientColorStops-action-color-w50) var(--tw-gradient-to-position);--tw-text-opacity: 1;color:rgb(var(--colors-action-color-light) / var(--tw-text-opacity))}@media (hover: hover){.ThemeVariantDark .BaseButton.-secondary:hover{--tw-border-opacity: 1;border-color:rgb(var(--colors-action-color) / var(--tw-border-opacity));--tw-bg-opacity: 1;background-color:rgb(var(--colors-action-color) / var(--tw-bg-opacity));--tw-text-opacity: 1;color:rgb(var(--colors-white) / var(--tw-text-opacity))}}.IconCaret{width:1em;height:1em}.MixinAnimationCaret,.AnimationCaret{display:flex;align-items:center}.MixinAnimationCaret>.arrow-wrapper,.AnimationCaret>.arrow-wrapper{position:relative;display:block;height:1.5rem;width:1.5rem}.MixinAnimationCaret>.arrow-wrapper>.arrow,.MixinAnimationCaret>.arrow-wrapper>.arrow-fixed,.AnimationCaret>.arrow-wrapper>.arrow,.AnimationCaret>.arrow-wrapper>.arrow-fixed{position:absolute;top:50%;left:0;display:block;--tw-translate-y: -50%;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));font-size:.875rem}@media (hover: hover){.MixinAnimationCaret:hover>.arrow-wrapper>.arrow,.AnimationCaret:hover>.arrow-wrapper>.arrow{animation:arrow-anim .25s ease-in normal}.MixinAnimationCaret:hover>.arrow-wrapper>.arrow-fixed,.AnimationCaret:hover>.arrow-wrapper>.arrow-fixed{animation:arrow-fixed-anim .25s ease-in normal}}.MixinAnimationCaret.caret-inline,.AnimationCaret.caret-inline{display:inline-block}.MixinAnimationCaret.caret-inline>.arrow-wrapper,.AnimationCaret.caret-inline>.arrow-wrapper{display:inline-block;width:1px}.MixinAnimationCaret.caret-inline>.arrow-wrapper>.arrow,.MixinAnimationCaret.caret-inline>.arrow-wrapper>.arrow-fixed,.AnimationCaret.caret-inline>.arrow-wrapper>.arrow,.AnimationCaret.caret-inline>.arrow-wrapper>.arrow-fixed{margin-top:.45em}@keyframes arrow-anim{0%{opacity:1;transform:translateY(-50%)}50%{transform:translate(1rem,-50%);opacity:0}to{transform:translate(1rem,-50%);opacity:0}}@keyframes arrow-fixed-anim{0%{opacity:0;transform:translate(-.5rem,-50%)}to{opacity:1;transform:translateY(-50%)}}.IconArrows{width:2em;height:2em}.IconLocation{width:1em;height:1em}.IconUser{width:1.4em;height:1.4em} diff --git a/packages/vue/lib/main.ts b/packages/vue/lib/main.ts index 33f78877..b0d9815c 100644 --- a/packages/vue/lib/main.ts +++ b/packages/vue/lib/main.ts @@ -1,4 +1,21 @@ // export components here import BaseButton from './../src/components/BaseButton/BaseButton.vue' -export { BaseButton } +import BaseHeading from './../src/components/BaseButton/BaseButton.vue' +import BaseLink from './../src/components/BaseLink/BaseLink.vue' +import IconArrows from './../src/components/Icons/IconArrows.vue' +import IconCaret from './../src/components/Icons/IconCaret.vue' +import IconLocation from './../src/components/Icons/IconLocation.vue' +import IconUser from './../src/components/Icons/IconUser.vue' +import MixinAnimationCaret from './../src/components/MixinAnimationCaret/MixinAnimationCaret.vue' + +export { + BaseButton, + BaseHeading, + BaseLink, + IconArrows, + IconCaret, + IconLocation, + IconUser, + MixinAnimationCaret +} diff --git a/packages/vue/package.json b/packages/vue/package.json index 7140c6a1..b4cb08d9 100644 --- a/packages/vue/package.json +++ b/packages/vue/package.json @@ -27,6 +27,7 @@ "@vitejs/plugin-vue": "^5.0.4", "autoprefixer": "^10.4.19", "postcss": "^8.4.38", + "postcss-import": "^16.1.0", "typescript": "^5.2.2", "vite": "^5.2.11", "vue-tsc": "^2.0.6" diff --git a/packages/vue/postcss.config.js b/packages/vue/postcss.config.js index 2b75bd8a..9d55d43f 100644 --- a/packages/vue/postcss.config.js +++ b/packages/vue/postcss.config.js @@ -1,5 +1,6 @@ export default { plugins: { + 'postcss-import': {}, tailwindcss: {}, autoprefixer: {} } diff --git a/packages/vue/src/components/BaseHeading/BaseHeading.vue b/packages/vue/src/components/BaseHeading/BaseHeading.vue new file mode 100644 index 00000000..44beefb4 --- /dev/null +++ b/packages/vue/src/components/BaseHeading/BaseHeading.vue @@ -0,0 +1,59 @@ + + diff --git a/packages/vue/src/components/BaseImage/BaseImage.vue b/packages/vue/src/components/BaseImage/BaseImage.vue new file mode 100644 index 00000000..27dc447c --- /dev/null +++ b/packages/vue/src/components/BaseImage/BaseImage.vue @@ -0,0 +1,122 @@ + + + diff --git a/packages/vue/src/components/BaseImageCaption/BaseImageCaption.vue b/packages/vue/src/components/BaseImageCaption/BaseImageCaption.vue new file mode 100644 index 00000000..020c47be --- /dev/null +++ b/packages/vue/src/components/BaseImageCaption/BaseImageCaption.vue @@ -0,0 +1,48 @@ + + + + diff --git a/packages/vue/src/components/BaseImagePlaceholder/BaseImagePlaceholder.vue b/packages/vue/src/components/BaseImagePlaceholder/BaseImagePlaceholder.vue new file mode 100644 index 00000000..d336e9f2 --- /dev/null +++ b/packages/vue/src/components/BaseImagePlaceholder/BaseImagePlaceholder.vue @@ -0,0 +1,91 @@ + + + + diff --git a/packages/vue/src/components/BlockImage/BlockImage.vue b/packages/vue/src/components/BlockImage/BlockImage.vue new file mode 100644 index 00000000..237a885d --- /dev/null +++ b/packages/vue/src/components/BlockImage/BlockImage.vue @@ -0,0 +1,48 @@ + + diff --git a/packages/vue/src/components/BlockImage/BlockImageFullBleed.vue b/packages/vue/src/components/BlockImage/BlockImageFullBleed.vue new file mode 100644 index 00000000..5ccde78f --- /dev/null +++ b/packages/vue/src/components/BlockImage/BlockImageFullBleed.vue @@ -0,0 +1,121 @@ + + diff --git a/packages/vue/src/components/BlockImage/BlockImageStandard.vue b/packages/vue/src/components/BlockImage/BlockImageStandard.vue new file mode 100644 index 00000000..a4b5c764 --- /dev/null +++ b/packages/vue/src/components/BlockImage/BlockImageStandard.vue @@ -0,0 +1,103 @@ + + diff --git a/packages/vue/src/components/Icons/IconArrows.vue b/packages/vue/src/components/Icons/IconArrows.vue new file mode 100644 index 00000000..ae0c4948 --- /dev/null +++ b/packages/vue/src/components/Icons/IconArrows.vue @@ -0,0 +1,40 @@ + + + diff --git a/packages/vue/src/components/Icons/IconLocation.vue b/packages/vue/src/components/Icons/IconLocation.vue new file mode 100644 index 00000000..574cfb91 --- /dev/null +++ b/packages/vue/src/components/Icons/IconLocation.vue @@ -0,0 +1,33 @@ + + + diff --git a/packages/vue/src/components/Icons/IconUser.vue b/packages/vue/src/components/Icons/IconUser.vue new file mode 100644 index 00000000..0ecd5bc0 --- /dev/null +++ b/packages/vue/src/components/Icons/IconUser.vue @@ -0,0 +1,23 @@ + + + diff --git a/packages/vue/src/components/LayoutHelper/LayoutHelper.vue b/packages/vue/src/components/LayoutHelper/LayoutHelper.vue new file mode 100644 index 00000000..2dead487 --- /dev/null +++ b/packages/vue/src/components/LayoutHelper/LayoutHelper.vue @@ -0,0 +1,38 @@ + + diff --git a/packages/vue/src/components/MixinFancybox/MixinFancybox.vue b/packages/vue/src/components/MixinFancybox/MixinFancybox.vue new file mode 100644 index 00000000..66684642 --- /dev/null +++ b/packages/vue/src/components/MixinFancybox/MixinFancybox.vue @@ -0,0 +1,410 @@ + + + + diff --git a/packages/vue/src/components/MixinFancybox/MixinFancyboxOpenButton.vue b/packages/vue/src/components/MixinFancybox/MixinFancyboxOpenButton.vue new file mode 100644 index 00000000..6e13850a --- /dev/null +++ b/packages/vue/src/components/MixinFancybox/MixinFancyboxOpenButton.vue @@ -0,0 +1,36 @@ + + + + + diff --git a/packages/vue/src/interfaces.ts b/packages/vue/src/interfaces.ts new file mode 100644 index 00000000..a170eb1a --- /dev/null +++ b/packages/vue/src/interfaces.ts @@ -0,0 +1,13 @@ +export interface ImageObject { + src: { + url: string + width: number + height: number + } + srcSet?: string + alt?: string + original?: string + caption?: string + credit?: string + detailUrl?: string +} diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 3973b7d3..f2652ab4 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -40,7 +40,7 @@ importers: version: 4.0.31 '@tailwindcss/forms': specifier: ^0.5.7 - version: 0.5.7(tailwindcss@3.4.3(ts-node@10.9.2(@types/node@20.12.12)(typescript@5.4.5))) + version: 0.5.7(tailwindcss@3.4.3(ts-node@10.9.2(@swc/core@1.5.7)(@types/node@20.12.12)(typescript@5.4.5))) swiper: specifier: ^11.1.3 version: 11.1.3 @@ -108,6 +108,9 @@ importers: postcss: specifier: ^8.4.38 version: 8.4.38 + postcss-import: + specifier: ^16.1.0 + version: 16.1.0(postcss@8.4.38) remark-gfm: specifier: ^4.0.0 version: 4.0.0 @@ -119,7 +122,7 @@ importers: version: 8.1.4(@babel/preset-env@7.24.5(@babel/core@7.24.5))(encoding@0.1.13)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) tailwindcss: specifier: ^3.4.3 - version: 3.4.3(ts-node@10.9.2(@types/node@20.12.12)(typescript@5.4.5)) + version: 3.4.3(ts-node@10.9.2(@swc/core@1.5.7)(@types/node@20.12.12)(typescript@5.4.5)) ts-node: specifier: ^10.9.2 version: 10.9.2(@swc/core@1.5.7)(@types/node@20.12.12)(typescript@5.4.5) @@ -140,7 +143,7 @@ importers: version: 4.0.31 '@tailwindcss/forms': specifier: ^0.5.7 - version: 0.5.7(tailwindcss@3.4.3(ts-node@10.9.2(@types/node@20.12.12)(typescript@5.4.5))) + version: 0.5.7(tailwindcss@3.4.3(ts-node@10.9.2(@swc/core@1.5.7)(@types/node@20.12.12)(typescript@5.4.5))) swiper: specifier: ^11.1.3 version: 11.1.3 @@ -202,15 +205,21 @@ importers: postcss: specifier: ^8.4.38 version: 8.4.38 + postcss-import: + specifier: ^16.1.0 + version: 16.1.0(postcss@8.4.38) rimraf: specifier: ^5.0.5 version: 5.0.7 storybook: specifier: ^8.1.4 version: 8.1.4(@babel/preset-env@7.24.5(@babel/core@7.24.5))(encoding@0.1.13)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) + storybook-addon-vue-slots: + specifier: ^0.9.29 + version: 0.9.29(@storybook/blocks@8.1.4(@types/react@18.3.2)(encoding@0.1.13)(prettier@3.2.5)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(@storybook/components@8.1.4(@types/react@18.3.2)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(@storybook/core-events@8.1.4)(@storybook/preview-api@8.1.4)(@storybook/theming@8.1.4(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(@storybook/types@8.1.4)(@storybook/vue3@8.1.4(encoding@0.1.13)(prettier@3.2.5)(vue@3.4.27(typescript@5.4.5)))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(vue@3.4.27(typescript@5.4.5)) tailwindcss: specifier: ^3.4.3 - version: 3.4.3(ts-node@10.9.2(@types/node@20.12.12)(typescript@5.4.5)) + version: 3.4.3(ts-node@10.9.2(@swc/core@1.5.7)(@types/node@20.12.12)(typescript@5.4.5)) ts-node: specifier: ^10.9.2 version: 10.9.2(@swc/core@1.5.7)(@types/node@20.12.12)(typescript@5.4.5) @@ -234,7 +243,7 @@ importers: version: link:../configs/tsconfig '@tailwindcss/forms': specifier: ^0.5.7 - version: 0.5.7(tailwindcss@3.4.3(ts-node@10.9.2(@types/node@20.12.12)(typescript@5.4.5))) + version: 0.5.7(tailwindcss@3.4.3(ts-node@10.9.2(@swc/core@1.5.7)(@types/node@20.12.12)(typescript@5.4.5))) stylelint: specifier: ^16.5.0 version: 16.5.0(typescript@5.4.5) @@ -243,7 +252,7 @@ importers: version: 13.1.0(postcss@8.4.38)(stylelint@16.5.0(typescript@5.4.5)) tailwindcss: specifier: ^3.4.3 - version: 3.4.3(ts-node@10.9.2(@types/node@20.12.12)(typescript@5.4.5)) + version: 3.4.3(ts-node@10.9.2(@swc/core@1.5.7)(@types/node@20.12.12)(typescript@5.4.5)) tailwindcss-themer: specifier: ^4.0.0 version: 4.0.0(tailwindcss@3.4.3(ts-node@10.9.2(@types/node@20.12.12)(typescript@5.4.5))) @@ -322,13 +331,13 @@ importers: version: 4.0.31 '@tailwindcss/forms': specifier: ^0.5.7 - version: 0.5.7(tailwindcss@3.4.3(ts-node@10.9.2(@types/node@20.12.12)(typescript@5.4.5))) + version: 0.5.7(tailwindcss@3.4.3(ts-node@10.9.2(@swc/core@1.5.7)(@types/node@20.12.12)(typescript@5.4.5))) swiper: specifier: ^11.1.3 version: 11.1.3 tailwindcss: specifier: ^3.4.3 - version: 3.4.3(ts-node@10.9.2(@types/node@20.12.12)(typescript@5.4.5)) + version: 3.4.3(ts-node@10.9.2(@swc/core@1.5.7)(@types/node@20.12.12)(typescript@5.4.5)) devDependencies: '@explorer-1/common': specifier: workspace:* @@ -342,6 +351,9 @@ importers: lazysizes: specifier: ^5.3.0 version: 5.3.2 + postcss-import: + specifier: ^16.1.0 + version: 16.1.0(postcss@8.4.38) typescript: specifier: ^5.2.2 version: 5.4.5 @@ -362,7 +374,7 @@ importers: version: 6.12.0(rollup@4.17.2)(ts-node@10.9.2(@types/node@20.12.12)(typescript@5.4.5)) '@tailwindcss/forms': specifier: ^0.5.7 - version: 0.5.7(tailwindcss@3.4.3(ts-node@10.9.2(@types/node@20.12.12)(typescript@5.4.5))) + version: 0.5.7(tailwindcss@3.4.3(ts-node@10.9.2(@swc/core@1.5.7)(@types/node@20.12.12)(typescript@5.4.5))) swiper: specifier: ^11.1.3 version: 11.1.3 @@ -411,13 +423,13 @@ importers: version: 4.0.31 '@tailwindcss/forms': specifier: ^0.5.7 - version: 0.5.7(tailwindcss@3.4.3(ts-node@10.9.2(@types/node@20.12.12)(typescript@5.4.5))) + version: 0.5.7(tailwindcss@3.4.3(ts-node@10.9.2(@swc/core@1.5.7)(@types/node@20.12.12)(typescript@5.4.5))) swiper: specifier: ^11.1.3 version: 11.1.3 tailwindcss: specifier: ^3.4.3 - version: 3.4.3(ts-node@10.9.2(@types/node@20.12.12)(typescript@5.4.5)) + version: 3.4.3(ts-node@10.9.2(@swc/core@1.5.7)(@types/node@20.12.12)(typescript@5.4.5)) tailwindcss-themer: specifier: ^4.0.0 version: 4.0.0(tailwindcss@3.4.3(ts-node@10.9.2(@types/node@20.12.12)(typescript@5.4.5))) @@ -440,6 +452,9 @@ importers: postcss: specifier: ^8.4.38 version: 8.4.38 + postcss-import: + specifier: ^16.1.0 + version: 16.1.0(postcss@8.4.38) typescript: specifier: ^5.2.2 version: 5.4.5 @@ -6525,6 +6540,12 @@ packages: peerDependencies: postcss: ^8.0.0 + postcss-import@16.1.0: + resolution: {integrity: sha512-7hsAZ4xGXl4MW+OKEWCnF6T5jqBw80/EE9aXg1r2yyn1RsVEU8EtKXbijEODa+rg7iih4bKf7vlvTGYR4CnPNg==} + engines: {node: '>=18.0.0'} + peerDependencies: + postcss: ^8.0.0 + postcss-js@4.0.1: resolution: {integrity: sha512-dDLF8pEO191hJMtlHFPRa8xsizHaM82MLfNkUHdUtVEV3tgTp5oj+8qbEqYM57SLfc74KSbw//4SeJma2LRVIw==} engines: {node: ^12 || ^14 || >= 16} @@ -7470,6 +7491,25 @@ packages: store2@2.14.3: resolution: {integrity: sha512-4QcZ+yx7nzEFiV4BMLnr/pRa5HYzNITX2ri0Zh6sT9EyQHbBHacC6YigllUPU9X3D0f/22QCgfokpKs52YRrUg==} + storybook-addon-vue-slots@0.9.29: + resolution: {integrity: sha512-7KdbUbYN8Lmblc9Rf06mYNQX10aYePNZBONpNMtFIS+VsZGxVXiaclkE95siou3/TPe/yRhv3hnE/VbFsnUlFw==} + peerDependencies: + '@storybook/blocks': ^7.0.27 + '@storybook/components': ^7.0.27 + '@storybook/core-events': ^7.0.27 + '@storybook/preview-api': ^7.0.27 + '@storybook/theming': ^7.0.27 + '@storybook/types': ^7.0.27 + '@storybook/vue3': ^7.0.27 + react: ^16.8.0 || ^17.0.27 || ^18.0.0 + react-dom: ^16.8.0 || ^17.0.27 || ^18.0.0 + vue: ^3.3.4 + peerDependenciesMeta: + react: + optional: true + react-dom: + optional: true + storybook@8.1.2: resolution: {integrity: sha512-6yJ7e320AmT6x8IGeNd3P79RDZI+8v9Pp3AZaHLgBnxdp4qehSfBZxW9MtZunVnXlgpI+HXOogwMJMWayg428A==} hasBin: true @@ -10081,7 +10121,7 @@ snapshots: postcss: 8.4.38 postcss-nesting: 12.1.4(postcss@8.4.38) tailwind-config-viewer: 2.0.2(tailwindcss@3.4.3(ts-node@10.9.2(@types/node@20.12.12)(typescript@5.4.5))) - tailwindcss: 3.4.3(ts-node@10.9.2(@types/node@20.12.12)(typescript@5.4.5)) + tailwindcss: 3.4.3(ts-node@10.9.2(@swc/core@1.5.7)(@types/node@20.12.12)(typescript@5.4.5)) ufo: 1.5.3 unctx: 2.3.1 transitivePeerDependencies: @@ -11817,10 +11857,10 @@ snapshots: '@swc/counter': 0.1.3 optional: true - '@tailwindcss/forms@0.5.7(tailwindcss@3.4.3(ts-node@10.9.2(@types/node@20.12.12)(typescript@5.4.5)))': + '@tailwindcss/forms@0.5.7(tailwindcss@3.4.3(ts-node@10.9.2(@swc/core@1.5.7)(@types/node@20.12.12)(typescript@5.4.5)))': dependencies: mini-svg-data-uri: 1.4.4 - tailwindcss: 3.4.3(ts-node@10.9.2(@types/node@20.12.12)(typescript@5.4.5)) + tailwindcss: 3.4.3(ts-node@10.9.2(@swc/core@1.5.7)(@types/node@20.12.12)(typescript@5.4.5)) '@trysound/sax@0.2.0': {} @@ -16475,12 +16515,19 @@ snapshots: read-cache: 1.0.0 resolve: 1.22.8 + postcss-import@16.1.0(postcss@8.4.38): + dependencies: + postcss: 8.4.38 + postcss-value-parser: 4.2.0 + read-cache: 1.0.0 + resolve: 1.22.8 + postcss-js@4.0.1(postcss@8.4.38): dependencies: camelcase-css: 2.0.1 postcss: 8.4.38 - postcss-load-config@4.0.2(postcss@8.4.38)(ts-node@10.9.2(@types/node@20.12.12)(typescript@5.4.5)): + postcss-load-config@4.0.2(postcss@8.4.38)(ts-node@10.9.2(@swc/core@1.5.7)(@types/node@20.12.12)(typescript@5.4.5)): dependencies: lilconfig: 3.1.1 yaml: 2.4.2 @@ -17488,6 +17535,20 @@ snapshots: store2@2.14.3: {} + storybook-addon-vue-slots@0.9.29(@storybook/blocks@8.1.4(@types/react@18.3.2)(encoding@0.1.13)(prettier@3.2.5)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(@storybook/components@8.1.4(@types/react@18.3.2)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(@storybook/core-events@8.1.4)(@storybook/preview-api@8.1.4)(@storybook/theming@8.1.4(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(@storybook/types@8.1.4)(@storybook/vue3@8.1.4(encoding@0.1.13)(prettier@3.2.5)(vue@3.4.27(typescript@5.4.5)))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(vue@3.4.27(typescript@5.4.5)): + dependencies: + '@storybook/blocks': 8.1.4(@types/react@18.3.2)(encoding@0.1.13)(prettier@3.2.5)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) + '@storybook/components': 8.1.4(@types/react@18.3.2)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) + '@storybook/core-events': 8.1.4 + '@storybook/preview-api': 8.1.4 + '@storybook/theming': 8.1.4(react-dom@18.3.1(react@18.3.1))(react@18.3.1) + '@storybook/types': 8.1.4 + '@storybook/vue3': 8.1.4(encoding@0.1.13)(prettier@3.2.5)(vue@3.4.27(typescript@5.4.5)) + vue: 3.4.27(typescript@5.4.5) + optionalDependencies: + react: 18.3.1 + react-dom: 18.3.1(react@18.3.1) + storybook@8.1.2(@babel/preset-env@7.24.5(@babel/core@7.24.5))(encoding@0.1.13)(react-dom@18.3.1(react@18.3.1))(react@18.3.1): dependencies: '@storybook/cli': 8.1.2(@babel/preset-env@7.24.5(@babel/core@7.24.5))(encoding@0.1.13)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) @@ -17747,7 +17808,7 @@ snapshots: open: 7.4.2 portfinder: 1.0.32 replace-in-file: 6.3.5 - tailwindcss: 3.4.3(ts-node@10.9.2(@types/node@20.12.12)(typescript@5.4.5)) + tailwindcss: 3.4.3(ts-node@10.9.2(@swc/core@1.5.7)(@types/node@20.12.12)(typescript@5.4.5)) transitivePeerDependencies: - supports-color @@ -17757,9 +17818,9 @@ snapshots: just-unique: 4.2.0 lodash.merge: 4.6.2 lodash.mergewith: 4.6.2 - tailwindcss: 3.4.3(ts-node@10.9.2(@types/node@20.12.12)(typescript@5.4.5)) + tailwindcss: 3.4.3(ts-node@10.9.2(@swc/core@1.5.7)(@types/node@20.12.12)(typescript@5.4.5)) - tailwindcss@3.4.3(ts-node@10.9.2(@types/node@20.12.12)(typescript@5.4.5)): + tailwindcss@3.4.3(ts-node@10.9.2(@swc/core@1.5.7)(@types/node@20.12.12)(typescript@5.4.5)): dependencies: '@alloc/quick-lru': 5.2.0 arg: 5.0.2 @@ -17778,7 +17839,7 @@ snapshots: postcss: 8.4.38 postcss-import: 15.1.0(postcss@8.4.38) postcss-js: 4.0.1(postcss@8.4.38) - postcss-load-config: 4.0.2(postcss@8.4.38)(ts-node@10.9.2(@types/node@20.12.12)(typescript@5.4.5)) + postcss-load-config: 4.0.2(postcss@8.4.38)(ts-node@10.9.2(@swc/core@1.5.7)(@types/node@20.12.12)(typescript@5.4.5)) postcss-nested: 6.0.1(postcss@8.4.38) postcss-selector-parser: 6.0.16 resolve: 1.22.8 From 0dac08442f60e24f0a0428a839af7730ed43842e Mon Sep 17 00:00:00 2001 From: Stephanie Smith Date: Wed, 29 May 2024 11:15:00 -0700 Subject: [PATCH 02/11] wip theme variants --- Makefile | 10 ++ apps/vue-storybook/.storybook/preview.ts | 6 +- apps/vue-storybook/tailwind.config.ts | 25 ++- .../src/scss/_typography-theme-colors.scss | 16 +- .../src/scss/components/_BaseButton.scss | 64 ++++---- packages/common/src/scss/styles.scss | 26 +++ .../_internal-typography-theme-colors.scss | 104 ++++++------ .../common/src/scss/themes/_internal.scss | 74 ++++----- packages/common/tailwind.config.ts | 153 ++++++++++++++++-- .../src/components/BaseButton/BaseButton.vue | 2 +- .../vue/src/components/BaseLink/BaseLink.vue | 6 +- 11 files changed, 336 insertions(+), 150 deletions(-) diff --git a/Makefile b/Makefile index 42595ff6..bea2a71b 100644 --- a/Makefile +++ b/Makefile @@ -61,6 +61,10 @@ nuke: html-storybook: pnpm --filter @explorer-1/html-storybook dev +## HTML: run Storybook with --force-build-preview +html-storybook-force: + pnpm --filter @explorer-1/html-storybook dev --force-build-preview + ## HTML: build Storybook html-storybook-build: pnpm --filter @explorer-1/html-storybook build @@ -83,6 +87,10 @@ vue-storybook: vue-storybook-build: pnpm --filter @explorer-1/vue-storybook build +## HTML: run Storybook with --force-build-preview +vue-storybook-force: + pnpm --filter @explorer-1/vue-storybook dev --force-build-preview + ## Vue: run Vite vue-dev: pnpm --filter @explorer-1/vue dev @@ -111,6 +119,8 @@ lint: lint-fix: pnpm run lint:fix +# how to use pnpm to upgrade storybook +# storybook@latest upgrade --package-manager pnpm # TODO: Below helper commands not running as expected change dir first, then pnpm dlx... # ## HTML: update Storybook # html-storybook-update: diff --git a/apps/vue-storybook/.storybook/preview.ts b/apps/vue-storybook/.storybook/preview.ts index e19b0fb7..e7ca3f8a 100644 --- a/apps/vue-storybook/.storybook/preview.ts +++ b/apps/vue-storybook/.storybook/preview.ts @@ -18,7 +18,7 @@ const preview: Preview = { themesConfig: { defaultValue: { themes: ['Default', 'EDU', 'Internal'], - method: 'data-attr' + method: 'css' } }, variantsConfig: { @@ -40,8 +40,8 @@ const preview: Preview = { icon: 'circlehollow', title: 'Default Theme' }, - { value: 'edu', icon: 'circle', title: 'EDU Theme' }, - { value: 'internal', icon: 'collapse', title: 'Internal Theme' } + { value: 'ThemeEdu', icon: 'circle', title: 'EDU Theme' }, + { value: 'ThemeInternal', icon: 'collapse', title: 'Internal Theme' } ], dynamicTitle: true } diff --git a/apps/vue-storybook/tailwind.config.ts b/apps/vue-storybook/tailwind.config.ts index 3678332f..b2ba4b3b 100644 --- a/apps/vue-storybook/tailwind.config.ts +++ b/apps/vue-storybook/tailwind.config.ts @@ -7,8 +7,31 @@ // import explorer 1's tailwind config import explorer1Config from '@explorer-1/common/tailwind.config' +import plugin from 'tailwindcss/plugin' export default { ...explorer1Config, - content: ['stories/**/*', './node_modules/@explorer-1/vue/src/components/**/*.vue'] + content: ['stories/**/*', './node_modules/@explorer-1/vue/src/components/**/*.vue'], + plugins: [ + ...explorer1Config.plugins, + plugin(({ addBase }) => { + addBase({ + ':root': { + '--color-theme-color': 'red', + '--color-theme-color-light': 'brown', + '--color-theme-color-dark': 'fuchsia' + }, + '.ThemeInternal.ThemeVariantDark': { + border: '5px solid pink', + '--color-theme-color': '#0080a4', + '--color-theme-color-light': 'red', + '--color-theme-color-dark': '#006480', + '--color-theme-color-darker': '#003c4d' + // '--gradientColorStop-theme-color-dark-w50': 'pink', + // '--gradientColorStop-theme-color-darker-w50': 'green', + // '--gradientColorStop-theme-color-light-w50': 'blue' + } + }) + }) + ] } diff --git a/packages/common/src/scss/_typography-theme-colors.scss b/packages/common/src/scss/_typography-theme-colors.scss index 314f7cd1..ab71a7d2 100644 --- a/packages/common/src/scss/_typography-theme-colors.scss +++ b/packages/common/src/scss/_typography-theme-colors.scss @@ -3,33 +3,27 @@ * ex: import this file in a vue component to be able to @apply these classes */ -.text-theme-color { - @apply text-jpl-red; -} - .text-theme-color-hover { - @apply text-jpl-red-dark; + @apply text-theme-color-dark; } .ThemeVariantLight { - .text-theme-color, .hover\:text-theme-color:hover { - @apply text-jpl-red; + @apply text-theme-color; } .text-theme-color-hover, .hover\:text-theme-color-hover:hover { - @apply text-jpl-red-dark; + @apply text-theme-color-dark; } } .ThemeVariantDark { - .text-theme-color, .hover\:text-theme-color:hover { - @apply text-jpl-red-light; + @apply text-theme-color-light; } .text-theme-color-hover .hover\:text-theme-color-hover:hover { - @apply text-jpl-red; + @apply text-theme-color; } } diff --git a/packages/common/src/scss/components/_BaseButton.scss b/packages/common/src/scss/components/_BaseButton.scss index 6d9dea14..b755e415 100644 --- a/packages/common/src/scss/components/_BaseButton.scss +++ b/packages/common/src/scss/components/_BaseButton.scss @@ -18,7 +18,7 @@ } &.-primary { - @apply px-12 text-white bg-action-color to-action-color-dark-w50; + @apply px-12 text-white bg-theme-color to-theme-color-dark-w50; & > .label { @apply border-2 border-transparent; @@ -26,10 +26,10 @@ } &.-secondary { - @apply px-12 bg-transparent text-action-color border-2 border-action-color to-action-color-dark-w50; + @apply px-12 bg-transparent text-theme-color border-2 border-theme-color to-theme-color-dark-w50; @include hover { - @apply text-white border-action-color-dark; + @apply text-white border-theme-color-dark; } } @@ -109,33 +109,33 @@ } } - .ThemeVariantLight & { - &.-primary { - @apply text-white bg-action-color to-action-color-dark-w50; - } - - &.-secondary { - @apply text-action-color bg-transparent border-action-color to-action-color-dark-w50; - - @include hover { - // including a bg color resolves pixelation inconsistencies between browsers - @apply text-white border-action-color-dark bg-action-color-dark; - } - } - } - - .ThemeVariantDark & { - &.-primary { - @apply text-white bg-action-color-light to-action-color-w50; - } - - &.-secondary { - @apply text-action-color-light bg-transparent border-action-color-light to-action-color-w50; - - @include hover { - // including a bg color resolves pixelation inconsistencies between browsers - @apply text-white border-action-color bg-action-color; - } - } - } + // .ThemeVariantLight & { + // &.-primary { + // @apply text-white bg-theme-color to-theme-color-dark-w50; + // } + + // &.-secondary { + // @apply text-theme-color bg-transparent border-theme-color to-theme-color-dark-w50; + + // @include hover { + // // including a bg color resolves pixelation inconsistencies between browsers + // @apply text-white border-theme-color-dark bg-theme-color-dark; + // } + // } + // } + + // .ThemeVariantDark & { + // &.-primary { + // @apply text-white bg-theme-color-light to-theme-color-w50; + // } + + // &.-secondary { + // @apply text-theme-color-light bg-transparent border-theme-color-light to-theme-color-w50; + + // @include hover { + // // including a bg color resolves pixelation inconsistencies between browsers + // @apply text-white border-theme-color bg-theme-color; + // } + // } + // } } diff --git a/packages/common/src/scss/styles.scss b/packages/common/src/scss/styles.scss index d92ddbc9..36e3762e 100644 --- a/packages/common/src/scss/styles.scss +++ b/packages/common/src/scss/styles.scss @@ -23,3 +23,29 @@ // components @import 'components'; + +// $jpl-sky-blue: 0 128 164; // 0080A4 +// $jpl-sky-blue-light: red; // #00a0cc +// $jpl-sky-blue-dark: 0 100 128; // #006480 +// $jpl-sky-blue-darker: 0 60 77; // #003c4d + +// // overrides for light and dark variants of the themes +// .ThemeVariantDark.ThemeInternal { +// --colors-theme-color: purple; +// --colors-theme-color-light: fuchsia; +// --colors-theme-color-dark: brown; +// --colors-theme-color-darker: orange; +// --gradientColorStops-theme-color-dark-w50: red; +// --gradientColorStops-theme-color-darker-w50: green; +// --gradientColorStops-theme-color-light-w50: blue; +// } + +// @layer base { +// :root { +// --colors-theme-color: @apply --colors-action-color; +// --colors-theme-color-light: foundationColors[ 'jpl-red-light'] --colors-theme-color-dark: foundationColors[ +// 'jpl-red-dark'] --gradientColorStops-theme-color-dark-w50: foundationColors[ 'jpl-red-dark'] --gradientColorStops-theme-color-darker-w50: +// foundationColors[ 'jpl-red-darker'] --gradientColorStops-theme-color-light-w50: +// foundationColors[ 'jpl-red-light']; +// } +// } diff --git a/packages/common/src/scss/themes/_internal-typography-theme-colors.scss b/packages/common/src/scss/themes/_internal-typography-theme-colors.scss index c7c4f908..61990295 100644 --- a/packages/common/src/scss/themes/_internal-typography-theme-colors.scss +++ b/packages/common/src/scss/themes/_internal-typography-theme-colors.scss @@ -1,59 +1,59 @@ -/* internal theme text styles - * kept in a separate scss file for easier use in components - * ex: import this file in a vue component to be able to @apply these classes - */ +// /* internal theme text styles +// * kept in a separate scss file for easier use in components +// * ex: import this file in a vue component to be able to @apply these classes +// */ -/* Deprecation warning: - * .text-theme-red and .text-theme-red-hover are deprecated and will be removed in the next major release. - * Use .text-theme-color and .text-theme-color-hover instead. - */ +// /* Deprecation warning: +// * .text-theme-red and .text-theme-red-hover are deprecated and will be removed in the next major release. +// * Use .text-theme-color and .text-theme-color-hover instead. +// */ -@layer utilities { - .ThemeInternal { - .text-theme-color, - .text-theme-red, - .hover\:text-theme-color:hover, - .hover\:text-theme-red:hover { - @apply text-jpl-sky-blue-dark; - } +// @layer utilities { +// .ThemeInternal { +// .text-theme-color, +// .text-theme-red, +// .hover\:text-theme-color:hover, +// .hover\:text-theme-red:hover { +// @apply text-jpl-sky-blue-dark; +// } - .text-theme-color-hover, - .text-theme-red-hover, - .hover\:text-theme-color-hover:hover, - .hover\:text-theme-red-hover:hover { - @apply text-jpl-sky-blue; - } +// .text-theme-color-hover, +// .text-theme-red-hover, +// .hover\:text-theme-color-hover:hover, +// .hover\:text-theme-red-hover:hover { +// @apply text-jpl-sky-blue; +// } - .ThemeVariantLight { - .text-theme-color, - .text-theme-red, - .hover\:text-theme-color:hover, - .hover\:text-theme-red:hover { - @apply text-jpl-sky-blue-dark; - } +// .ThemeVariantLight { +// .text-theme-color, +// .text-theme-red, +// .hover\:text-theme-color:hover, +// .hover\:text-theme-red:hover { +// @apply text-jpl-sky-blue-dark; +// } - .text-theme-color-hover, - .text-theme-red-hover, - .hover\:text-theme-color-hover:hover, - .hover\:text-theme-red-hover:hover { - @apply text-jpl-sky-blue; - } - } +// .text-theme-color-hover, +// .text-theme-red-hover, +// .hover\:text-theme-color-hover:hover, +// .hover\:text-theme-red-hover:hover { +// @apply text-jpl-sky-blue; +// } +// } - .ThemeVariantDark { - .text-theme-color, - .text-theme-red, - .hover\:text-theme-color:hover, - .hover\:text-theme-red:hover { - @apply text-jpl-sky-blue; - } +// .ThemeVariantDark { +// .text-theme-color, +// .text-theme-red, +// .hover\:text-theme-color:hover, +// .hover\:text-theme-red:hover { +// @apply text-jpl-sky-blue; +// } - .text-theme-color-hover, - .text-theme-red-hover, - .hover\:text-theme-color-hover:hover, - .hover\:text-theme-red-hover:hover { - @apply text-jpl-sky-blue-dark; - } - } - } -} +// .text-theme-color-hover, +// .text-theme-red-hover, +// .hover\:text-theme-color-hover:hover, +// .hover\:text-theme-red-hover:hover { +// @apply text-jpl-sky-blue-dark; +// } +// } +// } +// } diff --git a/packages/common/src/scss/themes/_internal.scss b/packages/common/src/scss/themes/_internal.scss index 869ef8df..a96b5141 100644 --- a/packages/common/src/scss/themes/_internal.scss +++ b/packages/common/src/scss/themes/_internal.scss @@ -1,44 +1,44 @@ -@import 'internal-typography-theme-colors'; +// @import 'internal-typography-theme-colors'; -@layer utilities { - .ThemeInternal { - .BaseButton { - &.-primary { - @apply bg-jpl-sky-blue-dark to-jpl-sky-blue-w50; - } +// @layer utilities { +// .ThemeInternal { +// .BaseButton { +// &.-primary { +// @apply bg-jpl-sky-blue-dark to-jpl-sky-blue-w50; +// } - &.-secondary { - @apply text-jpl-sky-blue-dark border-jpl-sky-blue-dark to-jpl-sky-blue-w50; +// &.-secondary { +// @apply text-jpl-sky-blue-dark border-jpl-sky-blue-dark to-jpl-sky-blue-w50; - @include hover { - @apply text-white border-jpl-sky-blue; - } - } +// @include hover { +// @apply text-white border-jpl-sky-blue; +// } +// } - &.-dark { - @include hover { - @apply text-gray-dark; - } - } - } +// &.-dark { +// @include hover { +// @apply text-gray-dark; +// } +// } +// } - .ThemeVariantLight, - .ThemeVariantDark, - &.ThemeVariantLight, - &.ThemeVariantDark { - .BaseButton { - &.-primary { - @apply bg-jpl-sky-blue-dark to-jpl-sky-blue-w50; - } +// .ThemeVariantLight, +// .ThemeVariantDark, +// &.ThemeVariantLight, +// &.ThemeVariantDark { +// .BaseButton { +// &.-primary { +// @apply bg-jpl-sky-blue-dark to-jpl-sky-blue-w50; +// } - &.-secondary { - @apply text-jpl-sky-blue-dark border-jpl-sky-blue-dark to-jpl-sky-blue-w50; +// &.-secondary { +// @apply text-jpl-sky-blue-dark border-jpl-sky-blue-dark to-jpl-sky-blue-w50; - @include hover { - @apply text-white border-jpl-sky-blue bg-jpl-sky-blue; - } - } - } - } - } -} +// @include hover { +// @apply text-white border-jpl-sky-blue bg-jpl-sky-blue; +// } +// } +// } +// } +// } +// } diff --git a/packages/common/tailwind.config.ts b/packages/common/tailwind.config.ts index 12f3c054..6ba6fd16 100644 --- a/packages/common/tailwind.config.ts +++ b/packages/common/tailwind.config.ts @@ -1,5 +1,6 @@ import type { Config } from 'tailwindcss' import type { CustomThemeConfig } from 'tailwindcss/types/config' +import plugin from 'tailwindcss/plugin' /* ** TailwindCSS Configuration File ** @@ -19,8 +20,10 @@ const foundationColors = { } const internalColors = { - 'jpl-sky-blue': '#53C8ED', - 'jpl-sky-blue-dark': '#0080A4' + 'jpl-sky-blue': '#0080A4', // TODO: update with different color + 'jpl-sky-blue-light': 'red', // '#00a0cc', // TODO: update with different color + 'jpl-sky-blue-dark': '#006480', // TODO: update with different color + 'jpl-sky-blue-darker': '#003c4d' // TODO: update with different color } const eduColors = { @@ -29,8 +32,8 @@ const eduColors = { 'edu-purple-dark': '#741EBB', 'edu-purple-darker': '#33283D', 'edu-teal': '#007E99', - 'edu-teal-light': '#007E99', // TODO: update with different color - 'edu-teal-dark': '#007E99', // TODO: update with different color + 'edu-teal-light': '#00a7cc', // TODO: update with different color + 'edu-teal-dark': '#005366', // TODO: update with different color 'edu-peach': '#FF5555' } @@ -68,15 +71,24 @@ const socialColors = { const uiColors = { 'theme-color': foundationColors['jpl-red'], 'theme-color-dark': foundationColors['jpl-red-dark'], + 'theme-color-light': foundationColors['jpl-red-light'], 'action-color': foundationColors['jpl-red'], 'action-color-light': foundationColors['jpl-red-light'], 'action-color-dark': foundationColors['jpl-red-dark'], 'action-color-darker': foundationColors['jpl-red-darker'], 'emphasis-color': foundationColors['jpl-red'], - 'emphasis-color-dark': foundationColors['jpl-red-dark'] + 'emphasis-color-dark': foundationColors['jpl-red-dark'], + 'highlight-color': foundationColors['jpl-red'], + 'highlight-color-dark': foundationColors['jpl-red-dark'] } +const ThemeVariantColors = { + 'theme-color': 'var(--color-theme-color)', + 'theme-color-light': 'var(--color-theme-color-light)', + 'theme-color-dark': 'var(--color-theme-color-dark)' +} const themeColors = { + ...ThemeVariantColors, ...foundationColors, ...internalColors, ...eduColors, @@ -221,6 +233,10 @@ const defaultTheme: Partial = { 'transparent-black-50': 'rgba(0 0 0 / 50%)', 'transparent-black-25': 'rgba(0 0 0 / 25%)', 'transparent-black-25-w50': 'rgba(0 0 0 / 25%) 50%', + 'theme-color-w50': foundationColors['jpl-red'] + ' 50%', + 'theme-color-dark-w50': foundationColors['jpl-red-dark'] + ' 50%', + 'theme-color-darker-w50': foundationColors['jpl-red-dark'] + ' 50%', + 'theme-color-light-w50': foundationColors['jpl-red-light'] + ' 50%', 'action-color-w50': foundationColors['jpl-red'] + ' 50%', 'action-color-dark-w50': foundationColors['jpl-red-dark'] + ' 50%', 'action-color-darker-w50': foundationColors['jpl-red-dark'] + ' 50%', @@ -335,12 +351,38 @@ const defaultTheme: Partial = { } } +const ThemeInternal = { + colors: { + // 'theme-color': 'var(--color-theme-color)', + // 'theme-color-light': internalColors['jpl-sky-blue-light'], + // 'theme-color-dark': internalColors['jpl-sky-blue-dark'], + 'action-color': internalColors['jpl-sky-blue'], + 'action-color-light': internalColors['jpl-sky-blue-light'], + 'action-color-dark': internalColors['jpl-sky-blue-dark'], + 'emphasis-color': internalColors['jpl-sky-blue'], + 'emphasis-color-dark': internalColors['jpl-sky-blue-dark'] + }, + gradientColorStops: { + // 'theme-color-w50': internalColors['jpl-sky-blue'] + ' 50%', + // 'theme-color-dark-w50': internalColors['jpl-sky-blue-dark'] + ' 50%', + // 'theme-color-darker-w50': internalColors['jpl-sky-blue-dark'] + ' 50%', + // 'theme-color-light-w50': internalColors['jpl-sky-blue-light'] + ' 50%', + 'action-color-w50': internalColors['jpl-sky-blue'] + ' 50%', + 'action-color-dark-w50': internalColors['jpl-sky-blue-dark'] + ' 50%', + 'action-color-darker-w50': internalColors['jpl-sky-blue-darker'] + ' 50%', + 'action-color-light-w50': internalColors['jpl-sky-blue-light'] + ' 50%' + } +} + export default { mode: 'jit', darkMode: 'class', theme: defaultTheme, plugins: [ require('@tailwindcss/forms'), + /** + * CSS Custom properties from design tokens. + */ require('tailwindcss-themer')({ defaultTheme: { extend: { @@ -350,11 +392,33 @@ export default { } }, themes: [ + // { + // name: 'internal-dark', + // selectors: ['.ThemeInternalDark'], + // extend: { + // colors: { + // ...ThemeInternal.colors, + // 'theme-color': 'var(--colors-theme-color)', + // 'theme-color-light': internalColors['jpl-sky-blue-light'], + // 'theme-color-dark': internalColors['jpl-sky-blue'] + // }, + // gradientColorStops: { + // ...ThemeInternal.gradientColorStops, + // 'theme-color-w50': internalColors['jpl-sky-blue-light'] + ' 50%', + // 'theme-color-dark-w50': internalColors['jpl-sky-blue'] + ' 50%', + // 'theme-color-darker-w50': internalColors['jpl-sky-blue'] + ' 50%', + // 'theme-color-light-w50': internalColors['jpl-sky-blue-light'] + ' 50%' + // } + // } + // }, { name: 'edu', selectors: ['.ThemeEdu', '[data-theme="edu"]'], extend: { colors: { + // 'theme-color': eduColors['edu-teal'], + // 'theme-color-light': eduColors['edu-teal-light'], + // 'theme-color-dark': eduColors['edu-teal-dark'], 'action-color': eduColors['edu-teal'], 'action-color-light': eduColors['edu-teal-light'], 'action-color-dark': eduColors['edu-teal-dark'], @@ -362,6 +426,10 @@ export default { 'emphasis-color-dark': eduColors['edu-purple-dark'] }, gradientColorStops: { + // 'theme-color-w50': eduColors['edu-teal'] + ' 50%', + // 'theme-color-dark-w50': eduColors['edu-teal-dark'] + ' 50%', + // 'theme-color-darker-w50': eduColors['edu-teal-dark'] + ' 50%', + // 'theme-color-light-w50': eduColors['edu-teal-light'] + ' 50%', 'action-color-w50': eduColors['edu-teal'] + ' 50%', 'action-color-dark-w50': eduColors['edu-teal-dark'] + ' 50%', 'action-color-darker-w50': eduColors['edu-teal-dark'] + ' 50%', @@ -372,14 +440,79 @@ export default { { name: 'internal', selectors: ['.ThemeInternal', '[data-theme="internal"]'], - extend: { - colors: { - 'action-color': 'orange' // for testing - } - } + extend: ThemeInternal } ] }) + // plugin(({ addBase }) => { + // addBase({ + // ':root': { + // '--colors-theme-color': foundationColors['jpl-red'], + // '--colors-theme-color-light': foundationColors['jpl-red-light'], + // '--colors-theme-color-dark': foundationColors['jpl-red-dark'], + // '--gradientColorStops-theme-color-dark-w50': foundationColors['jpl-red-dark'], + // '--gradientColorStops-theme-color-darker-w50': foundationColors['jpl-red-darker'], + // '--gradientColorStops-theme-color-light-w50': foundationColors['jpl-red-light'] + // }, + // '.ThemeInternal.ThemeVariantDark': { + // '--colors-theme-color': '#0080a4', + // '--colors-theme-color-light': 'red', + // '--colors-theme-color-dark': '#006480', + // '--colors-theme-color-darker': '#003c4d', + // '--gradientColorStops-theme-color-dark-w50': 'pink', + // '--gradientColorStops-theme-color-darker-w50': 'green', + // '--gradientColorStops-theme-color-light-w50': 'blue' + // } + // }) + // }), + // plugin(function ({ addUtilities }) { + // addUtilities({ + // '.my-crazy-thing': { + // background: 'red' + // } + // }) + // }) + // plugin(({ addBase }) => { + // addBase({ + // '.ThemeInternal.ThemeVariantDark': { + // border: '5px solid pink', + // '--colors-theme-color': '#0080a4', + // '--colors-theme-color-light': 'red', + // '--colors-theme-color-dark': '#006480', + // '--colors-theme-color-darker': '#003c4d', + // '--gradientColorStops-theme-color-dark-w50': 'pink', + // '--gradientColorStops-theme-color-darker-w50': 'green', + // '--gradientColorStops-theme-color-light-w50': 'blue' + // } + // // ':root': { + // // '--colors-theme-color': foundationColors['jpl-red'], + // // '--colors-theme-color-light': foundationColors['jpl-red-light'], + // // '--colors-theme-color-dark': foundationColors['jpl-red-dark'] + // // }, + // // '.ThemeVariantDark.ThemeInternal': { + // // '--colors-theme-color': internalColors['jpl-sky-blue-light'], + // // '--colors-theme-color-light': internalColors['jpl-sky-blue-light'], + // // '--colors-theme-color-dark': internalColors['jpl-sky-blue'], + // // '--gradientColorStops-theme-color-w50': internalColors['jpl-sky-blue-light'] + ' 50%', + // // '--gradientColorStops-theme-color-dark-w50': internalColors['jpl-sky-blue'] + ' 50%', + // // '--gradientColorStops-theme-color-darker-w50': + // // internalColors['jpl-sky-blue-dark'] + ' 50%', + // // '--gradientColorStops-theme-color-light-w50': + // // internalColors['jpl-sky-blue-light'] + ' 50%' + // // } + // // '.ThemeVariantLight': { + // // '--colors-theme-color': foundationColors['jpl-red-light'], + // // }, + // // '.ThemeEDU': { + // // '--colors-theme-color': eduColors['edu-purple'], + // // '--color-theme-color-light': eduColors['edu-peach'], + // // '--color-theme-color-dark': eduColors['edu-purple-dark'], + // // }, + // // '.ThemeEDU .ThemeDark': { + // // '--colors-theme-color': eduColors['edu-peach'], + // // }, + // }) + // }) ], future: { hoverOnlyWhenSupported: true diff --git a/packages/vue/src/components/BaseButton/BaseButton.vue b/packages/vue/src/components/BaseButton/BaseButton.vue index 25f16c92..97c8c7d5 100644 --- a/packages/vue/src/components/BaseButton/BaseButton.vue +++ b/packages/vue/src/components/BaseButton/BaseButton.vue @@ -94,7 +94,7 @@ export default defineComponent({