diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml index 5b2a0168cf..5f0b259559 100644 --- a/.github/workflows/ci.yml +++ b/.github/workflows/ci.yml @@ -100,6 +100,9 @@ jobs: run: yarn --immutable - name: Run build run: yarn build:docs + env: + DOCS_EXAMPLES_VUE_PATH: 'https://docs.storefrontui.io/v2-vue' + DOCS_EXAMPLES_REACT_PATH: 'https://docs.storefrontui.io/v2-react' build-release: name: Build packages for release @@ -319,6 +322,6 @@ jobs: env: GITHUB_PUSH_BEFORE_SHA: ${{ github.event.before }} GITHUB_PUSH_BASE_SHA: ${{ github.event.base }} - GITHUB_PULL_BASE_SHA: ${{ github.event.pull_request.base.sha }} + GITHUB_PULL_BASE_SHA: ${{ github.event.pull_request.base.sha }} GITHUB_DEFAULT_BRANCH: ${{ github.event.repository.default_branch }} GITGUARDIAN_API_KEY: ${{ secrets.GITGUARDIAN_API_KEY }} diff --git a/.gitignore b/.gitignore index 98f40503ad..70f086d553 100644 --- a/.gitignore +++ b/.gitignore @@ -34,6 +34,7 @@ yarn-error.log* .env.development.local .env.test.local .env.production.local +.env # turbo and others .turbo diff --git a/.vuestorefrontcloud/docs/Dockerfile b/.vuestorefrontcloud/docs/Dockerfile index 5762e4c8de..b7478f802a 100644 --- a/.vuestorefrontcloud/docs/Dockerfile +++ b/.vuestorefrontcloud/docs/Dockerfile @@ -1,12 +1,7 @@ -FROM node:16-alpine AS build +FROM node:16 AS build WORKDIR /var/www -RUN apk add --no-cache yarn -# needed because of turbo issue -# see: https://github.com/vercel/turbo/issues/2309#issuecomment-1288660455 -RUN apk add --no-cache libc6-compat - ARG VITE_DOCS_BASEPATH ARG VITE_DOCS_EXAMPLES_REACT_PATH ARG VITE_DOCS_EXAMPLES_VUE_PATH @@ -20,10 +15,10 @@ ENV ENVIRONMENT=$ENVIRONMENT COPY . . RUN yarn RUN ENV_NAME=$ENVIRONMENT yarn build:replace-assets-url-with -RUN yarn build:peer-next +RUN yarn build:vue RUN yarn build:docs -FROM nginx -COPY --from=build /var/www/apps/docs/components/.vuepress/dist /usr/share/nginx/html/v2 -COPY .vuestorefrontcloud/docs/default.conf /etc/nginx/conf.d/default.conf +WORKDIR /var/www/apps/docs/components + +CMD ["yarn", "serve"] diff --git a/_templates/component/new/docs_readme.ejs.t b/_templates/component/new/docs_readme.ejs.t index a0358eef59..baf6125955 100644 --- a/_templates/component/new/docs_readme.ejs.t +++ b/_templates/component/new/docs_readme.ejs.t @@ -35,9 +35,9 @@ hideBreadcrumbs: true ## Source code - +::vue-only <<<../../../packages/sfui/frameworks/vue/components/<%= name %>/<%= name %>.vue - - +:: +::react-only <<<../../../packages/sfui/frameworks/react/components/<%= name %>/<%= name %>.tsx - +:: diff --git a/apps/docs/components/.env.example b/apps/docs/components/.env.example index c1673a86c3..3a4504af98 100644 --- a/apps/docs/components/.env.example +++ b/apps/docs/components/.env.example @@ -1,3 +1,2 @@ -VITE_DOCS_BASEPATH=/v2/ -VITE_DOCS_EXAMPLES_REACT_PATH=http://localhost:3002 -VITE_DOCS_EXAMPLES_VUE_PATH=http://localhost:3001 +DOCS_EXAMPLES_VUE_PATH=http://localhost:3001 +DOCS_EXAMPLES_REACT_PATH=http://localhost:3002 \ No newline at end of file diff --git a/apps/docs/components/.gitignore b/apps/docs/components/.gitignore deleted file mode 100644 index 51eb69f27e..0000000000 --- a/apps/docs/components/.gitignore +++ /dev/null @@ -1,2 +0,0 @@ -dist/ -.env diff --git a/apps/docs/components/.vuepress/components/ComponentList.vue b/apps/docs/components/.vuepress/components/ComponentList.vue deleted file mode 100644 index ca3749ef40..0000000000 --- a/apps/docs/components/.vuepress/components/ComponentList.vue +++ /dev/null @@ -1,95 +0,0 @@ - - - diff --git a/apps/docs/components/.vuepress/components/FigmaLink.vue b/apps/docs/components/.vuepress/components/FigmaLink.vue deleted file mode 100644 index 9edde44a41..0000000000 --- a/apps/docs/components/.vuepress/components/FigmaLink.vue +++ /dev/null @@ -1,11 +0,0 @@ - - - diff --git a/apps/docs/components/.vuepress/components/Generate.vue b/apps/docs/components/.vuepress/components/Generate.vue deleted file mode 100644 index d5f491263f..0000000000 --- a/apps/docs/components/.vuepress/components/Generate.vue +++ /dev/null @@ -1,70 +0,0 @@ - + + diff --git a/apps/docs/components/components/content/HookList.vue b/apps/docs/components/components/content/HookList.vue new file mode 100644 index 0000000000..06cf62df99 --- /dev/null +++ b/apps/docs/components/components/content/HookList.vue @@ -0,0 +1,15 @@ + + diff --git a/apps/docs/components/components/content/ReactOnly.vue b/apps/docs/components/components/content/ReactOnly.vue new file mode 100644 index 0000000000..a6ed38afb4 --- /dev/null +++ b/apps/docs/components/components/content/ReactOnly.vue @@ -0,0 +1,8 @@ + + diff --git a/apps/docs/components/components/content/Showcase.vue b/apps/docs/components/components/content/Showcase.vue new file mode 100644 index 0000000000..ad5d0da890 --- /dev/null +++ b/apps/docs/components/components/content/Showcase.vue @@ -0,0 +1,119 @@ + + + diff --git a/apps/docs/components/.vuepress/components/TypographyList.vue b/apps/docs/components/components/content/TypographyList.vue similarity index 100% rename from apps/docs/components/.vuepress/components/TypographyList.vue rename to apps/docs/components/components/content/TypographyList.vue diff --git a/apps/docs/components/components/content/VueOnly.vue b/apps/docs/components/components/content/VueOnly.vue new file mode 100644 index 0000000000..dad647bb76 --- /dev/null +++ b/apps/docs/components/components/content/VueOnly.vue @@ -0,0 +1,8 @@ + + diff --git a/apps/docs/components/components/drawer.md b/apps/docs/components/components/drawer.md deleted file mode 100644 index 7e53dc36d7..0000000000 --- a/apps/docs/components/components/drawer.md +++ /dev/null @@ -1,116 +0,0 @@ ---- -layout: AtomLayout -hideBreadcrumbs: true ---- - -# Drawer - -::: slot usage - -`SfDrawer` is a container that can be anchored to the left, right, top or bottom edge of the screen. This can be used to create things like navigation drawers, sliding cart views, or anything else that needs to stick to the edge of the screen. It also adds additional functionality like closing when the user clicks outside of the drawer or presses the escape key. - -## Examples - -### Basic Usage - -`SfDrawer` supports 4 different placements that can be set via `placement` prop: `top`, `right`, `bottom`, `left`. To open/close the drawer, you can use `v-model`the `open` prop and the `onClose` event. - -By default, `SfDrawer` will emit `update:modelValue`trigger `onClose` when the user clicks outside of the drawer or presses the escape key. These behaviors can be disabled by setting the `disableClickAway` and `disableEsc` props to `true`. - - - - - -<<<../../preview/nuxt/pages/showcases/Drawer/Placement.vue - - - - -<<<../../preview/next/pages/showcases/Drawer/Placement.tsx#source - - - - - -### Drawer transition and trap focus - -You can wrap `SfDrawer` in a [``](https://vuejs.org/guide/built-ins/transition.html#the-transition-component)[``](https://reactcommunity.org/react-transition-group/css-transition) component to add enter/exit animations. Additionally, you can use the `useTrapFocus` composablehook for better control of focusable elements inside. - - - - - -<<<../../preview/nuxt/pages/showcases/Drawer/TransitionAndCloseButton.vue - - - - -<<<../../preview/next/pages/showcases/Drawer/TransitionAndCloseButton.tsx#source - - - - -## Accessibility notes - -The component is providing keyboard accessibility with `@keydown.esc="onEscKeyDown"` and `onClickOutside` function which allows users to close the drawer by pressing the Escape key or click outside of the drawer. - -## Playground - - - -::: - -::: slot api - -## Props - -| Prop name | Type | Default value | Possible values | -| --------- | ---- | ------------- | --------------- | - -| `modelValue` | `boolean` | `false` | | -| `tag` | `string` | `'aside'` | | - - -| `open`\* | `boolean` | `false` | | -| `as` | `ReactElement` | `'aside'` | | - -| `placement` | `SfDrawerPlacement` | `'left'` | `'top'`, `'bottom'`, `'left'`, `'right'` | -| `disableClickAway` | `boolean` | `false` | | -| `disableEsc` | `boolean` | `false` | | - -| `onClose` | `Function` | | | -| `children` | `ReactNode` | | | - - - -## Slots - -| Slot name | Description | -| --------- | ----------------------- | -| `default` | place content of drawer | - -## Events - -| Event name | Trigger | -| ------------------- | ------------------------------ | -| `update:modelValue` | emits on clicking close button | - - - -::: - -::: slot source - - - - -<<<../../../packages/sfui/frameworks/vue/components/SfDrawer/SfDrawer.vue - - - - -<<<../../../packages/sfui/frameworks/react/components/SfDrawer/SfDrawer.tsx - - - -::: diff --git a/apps/docs/components/components/listitem.md b/apps/docs/components/components/listitem.md deleted file mode 100644 index a10af4809e..0000000000 --- a/apps/docs/components/components/listitem.md +++ /dev/null @@ -1,130 +0,0 @@ ---- -layout: AtomLayout -hideBreadcrumbs: true ---- - -# ListItem - -::: slot usage - -`SfListItem` is a component that can be used in all sorts of menus. It comes with styles for common data states like `disabled` and `selected`. - -For a great example of the `SfListItem` in action, check out the [Colors Filter](/vuereact/blocks/filters.html) block. - -## Examples - -### ListItem sizes - -`SfListItem` supports 3 sizes that can be set with the `size` prop: `'sm'`, `'base'`, `'lg'`. - - - - - -<<<../../preview/nuxt/pages/showcases/ListItem/ListItemSizes.vue - - - - -<<<../../preview/next/pages/showcases/ListItem/ListItemSizes.tsx#source - - - - -### ListItem slots - -`SfListItem` provides `prefix` and `suffix` slots`slotPrefix` and `slotSuffix` props that you can use to add custom content before/after your default content. This can be useful for adding inputs, thumbnails, icons, or any other content to your list items. - - - - - -<<<../../preview/nuxt/pages/showcases/ListItem/ListItemSlots.vue - - - - -<<<../../preview/next/pages/showcases/ListItem/ListItemSlots.tsx#source - - - - -### ListItem truncate - -For items with a lot of text content, you can use Tailwind's `truncate` class. - - - - - -<<<../../preview/nuxt/pages/showcases/ListItem/ListItemTruncated.vue - - - - -<<<../../preview/next/pages/showcases/ListItem/ListItemTruncated.tsx#source - - - - -## Accessibility notes - -ListItem component can be rendered as an `
  • ` or `` or any other tag by providing it with prop `tag``as`. When no tag provided, the component will render as an `
  • `. To achieve proper accessibility it is important to implement required properties depending on the passed tag. - -## Playground - - - -::: - -::: slot api - -## Props - -| Prop name | Type | Default value | Possible values | -| ----------- | ---------------- | ------------- | ------------------------ | -| `size` | `SfListItemSize` | `'base'` | `'sm'`, `'base'`, `'lg'` | -| `disabled ` | `boolean` | `false` | | -| `selected` | `boolean` | `false` | | - -| `tag` | `string` | `'li'` | any tag name | -| `childrenTag` | `string` | `'span'` | any tag name | - - -| `as` | `ReactElement` | `'li'` | any tag name | -| `children` | `ReactNode` | | label content | -| `childrenTag` | `ReactElement` | `'span'` | any tag name | -| `slotPrefix` | `ReactNode` | | right side content | -| `slotSuffix` | `ReactNode` | | left side content | -| `className` | `string` | | | - - - - -## Slots - -| Slot name | Description | -| --------- | ------------------ | -| default | content | -| prefix | right side content | -| suffix | left side content | - - - -::: - -::: slot source - - - - -<<<../../../packages/sfui/frameworks/vue/components/SfListItem/SfListItem.vue - - - - -<<< ../../../packages/sfui/frameworks/react/components/SfListItem/SfListItem.tsx - - - -::: diff --git a/apps/docs/components/components/thumbnail.md b/apps/docs/components/components/thumbnail.md deleted file mode 100644 index bfc462591a..0000000000 --- a/apps/docs/components/components/thumbnail.md +++ /dev/null @@ -1,119 +0,0 @@ ---- -layout: AtomLayout -hideBreadcrumbs: true ---- -# Thumbnail - -::: slot usage - -`SfThumbnail` is a component that allows the user to display a color, gradient, icon, or image in a thumbnail style. One common use case from our [blocks](../blocks/Filters.html) is using this component as avatar or thumbnail for filters. - -## Examples - -### Sizes - -Thumbnail supports various sizes that can be set with the `size` prop: `'sm'`, `'base'`, `lg ` and `'xl'` - - - - -<<<../../preview/nuxt/pages/showcases/Thumbnail/Sizes.vue - - -<<<../../preview/next/pages/showcases/Thumbnail/Sizes.tsx#source - - - -### Single color - -The most simple use case of thumbnail can be achieved by seting a single color with any of Tailwind's background `bg-` property. - - - - -<<<../../preview/nuxt/pages/showcases/Thumbnail/Color.vue - - -<<<../../preview/next/pages/showcases/Thumbnail/Color.tsx#source - - - -### Gradient - -Gradients can be applied with any of Tailwind's `bg-gradient-` classes. - - - - -<<<../../preview/nuxt/pages/showcases/Thumbnail/Gradient.vue - - -<<<../../preview/next/pages/showcases/Thumbnail/Gradient.tsx#source - - - -### Image - -You can pass an image into the default slot as children to achieve avatar-like look of thumbnail. - - - - -<<<../../preview/nuxt/pages/showcases/Thumbnail/Image.vue - - -<<<../../preview/next/pages/showcases/Thumbnail/Image.tsx#source - - - -### Icon - -Similar to images, you can also pass an icon into the default slot as children. - - - - -<<<../../preview/nuxt/pages/showcases/Thumbnail/Icon.vue - - -<<<../../preview/next/pages/showcases/Thumbnail/Icon.tsx#source - - - -## Playground - - - -::: - -::: slot api - -## Props - -| Prop name | Type | Default value | Possible values | -|------------------ |----------------------------|---------------|----------------------------------------| -| `size` | `SfChip` | `'base'` | `'sm'`, `'base'`, `'lg'` | - -| `className` | `string` | | | -| `children` | `ReactNode` | | | - - - -## Slots - -| Slot name | Description | -| --------- | ------------------------------- | -| `default` | allows to pass icon or image | - -::: - -::: slot source - - -<<<../../../packages/sfui/frameworks/vue/components/SfThumbnail/SfThumbnail.vue - - -<<<../../../packages/sfui/frameworks/react/components/SfThumbnail/SfThumbnail.tsx - - -::: \ No newline at end of file diff --git a/apps/docs/components/composables/framework.ts b/apps/docs/components/composables/framework.ts new file mode 100644 index 0000000000..282026e560 --- /dev/null +++ b/apps/docs/components/composables/framework.ts @@ -0,0 +1,59 @@ +type Framework = { + name: 'vue' | 'react' | 'qwik'; + icon: string; + link?: string; +}; + +export function useFramework() { + const frameworks: Framework[] = [ + { + name: 'vue', + icon: 'logos:vue', + }, + { + name: 'react', + icon: 'logos:react', + }, + { + name: 'qwik', + icon: 'logos:qwik-icon', + link: 'https://qwik-storefront-ui.pages.dev', + }, + ]; + + const framework = useState('framework', () => 'vue'); + + const route = useRoute(); + const router = useRouter(); + const setFramework = (name: string) => { + const previous = framework.value; + if (name !== 'qwik') { + framework.value = name; + if (route.path.includes(previous)) { + router.push(route.path.replace(previous, framework.value)); + } + } + }; + + const selectedFramework = computed(() => frameworks.find((f) => f.name === framework.value) ?? frameworks[0]); + + watch( + () => route.fullPath, + (path) => { + const foundFramework = frameworks.find((f) => route.path.includes(f.name.toLowerCase())); + if (foundFramework) { + framework.value = foundFramework.name; + } + }, + { + immediate: true, + }, + ); + + return { + framework, + frameworks, + setFramework, + selectedFramework, + }; +} diff --git a/apps/docs/components/content/1.index.md b/apps/docs/components/content/1.index.md new file mode 100644 index 0000000000..c3b84dd35a --- /dev/null +++ b/apps/docs/components/content/1.index.md @@ -0,0 +1,38 @@ +--- +layout: fullscreen +--- +# Storefront UI Documentation +::subheader +Fast, accessible, and fully customizable components built for e-commerce. +:: + +::div{class="my-8 mb-16 flex gap-4 [&>a]:inline not-prose"} +:::docs-button{to="/getting-started/vue"} +Install for Vue +::: +:::docs-button{to="/getting-started/react" class="dark:bg-[#61DBFB] !bg-[#61DBFB] !text-black"} +Install for React +::: +:::docs-button{to="https://qwik-storefront-ui.pages.dev" class="dark:bg-[#AC7EF4] !bg-[#AC7EF4]"} +Install for Qwik +::: +:: + +## Base Components + +Beautiful, fast, and fully accessible components that integrate with Tailwind CSS to help you quickly build more complex structures. + +:component-list + +## Composables + +Utility functions that help you build your own custom components or extend Storefront UI. + +:hook-list + +## Blocks + +Fully accessible UI blocks, designed to integrate beautifully with Tailwind CSS and Vue. + + +:block-list \ No newline at end of file diff --git a/apps/docs/components/content/2.getting-started/1.index.md b/apps/docs/components/content/2.getting-started/1.index.md new file mode 100644 index 0000000000..3784846e58 --- /dev/null +++ b/apps/docs/components/content/2.getting-started/1.index.md @@ -0,0 +1,4 @@ +--- +title: Installation +--- +# File exists for redirection purposes \ No newline at end of file diff --git a/apps/docs/components/vue/browser-support.md b/apps/docs/components/content/2.getting-started/2.browser-support.md similarity index 96% rename from apps/docs/components/vue/browser-support.md rename to apps/docs/components/content/2.getting-started/2.browser-support.md index adc3b3177b..c7de262295 100644 --- a/apps/docs/components/vue/browser-support.md +++ b/apps/docs/components/content/2.getting-started/2.browser-support.md @@ -1,8 +1,3 @@ ---- -layout: DefaultLayout -hideBreadcrumbs: true ---- - # Browser support Understanding the browser compatibility of a UI framework is crucial for developers to ensure that their applications work seamlessly across different browsers and versions. This document will outline the supported browsers, their versions, and any specific considerations or known issues related to compatibility. diff --git a/apps/docs/components/content/2.getting-started/_dir.yml b/apps/docs/components/content/2.getting-started/_dir.yml new file mode 100644 index 0000000000..b5ebb13f75 --- /dev/null +++ b/apps/docs/components/content/2.getting-started/_dir.yml @@ -0,0 +1 @@ +navigation.title: Getting Started diff --git a/apps/docs/components/react/getting-started.md b/apps/docs/components/content/2.getting-started/react.md similarity index 92% rename from apps/docs/components/react/getting-started.md rename to apps/docs/components/content/2.getting-started/react.md index 7b08c804e7..6131ef22ba 100644 --- a/apps/docs/components/react/getting-started.md +++ b/apps/docs/components/content/2.getting-started/react.md @@ -1,7 +1,5 @@ --- -layout: DefaultLayout -hideBreadcrumbs: true -tabOptions: [next.js, vite] +navigation: false --- # Installation @@ -16,9 +14,9 @@ You can try out Storefront UI in your browser with our online playground. Stackblitz playground -:::::: slot next.js +::tabs{:titles='["Next.js", "Vite"]' class="mt-8"} -## Next.js +#tab-1 If you prefer video guides, we have a quick video that can help you set up Storefront UI in your Next.js project. @@ -57,7 +55,7 @@ pnpm add @storefront-ui/react pnpm add -D tailwindcss postcss autoprefixer ``` -::: tip +::tip In Next.js 13 environments that are not using [App Router](https://beta.nextjs.org/docs/api-reference/next-config#appdir) there is an issue with [Next.js not detecting ESM modules of subdependencies correctly.](https://github.com/vercel/next.js/issues/39375) As a workaround, you can add `transpilePackages: ['@storefront-ui/react']` to your `next.config.js` configuration file: @@ -72,7 +70,7 @@ const nextConfig = { module.exports = nextConfig; ``` -::: +:: ### Initialize Tailwind @@ -86,12 +84,12 @@ npx tailwindcss init -p Storefront UI plugs into your Tailwind configuration to add any base styles and CSS variables. To do this, you need to import the Storefront UI Tailwind preset and add it to your `tailwind.config.js` file. -::: tip Add a path to your installed package +::tip Add a path to your installed package In order for Tailwind to properly detect the utility classes used in Storefront UI components, you need to add a path to wherever your `node_modules` folder is located to the `content` property. In the example below, we're using the default location for `node_modules`, but this may change if you're working in a monorepo. -::: +:: + - ```js // tailwind.config.js @@ -114,13 +112,13 @@ module.exports = { }; ``` - + ### Add Tailwind to Your CSS Finally, you'll need to add CSS directives to add each Tailwind layer to `src/app/globals.css`. Since Storefront UI fits into your Tailwind workflow, you'll need to add Tailwind's base, components, and utilities layers to your CSS. - + ```css /* src/styles/global.css */ @@ -129,19 +127,17 @@ Finally, you'll need to add CSS directives to add each Tailwind layer to `src/ap @tailwind utilities; ``` - + ### You're Ready to Go! - -<<<../../preview/next/pages/showcases/Button/ButtonBlock.tsx#source - +<<<../../../../preview/next/pages/showcases/Button/ButtonBlock.tsx#source + -:::::: -:::::: slot vite +#tab-2 ## Vite + React @@ -190,12 +186,12 @@ npx tailwindcss init -p Storefront UI plugs into your Tailwind configuration to add any base styles and CSS variables. To do this, you need to import the Storefront UI Tailwind preset and add it to your `tailwind.config.js` file. -::: tip Add a path to your installed package +::tip Add a path to your installed package In order for Tailwind to properly detect the utility classes used in Storefront UI components, you need to add a path to wherever your `node_modules` folder is located to the `content` property. In the example below, we're using the default location for `node_modules`, but this may change if you're working in a monorepo. -::: +:: + - ```ts // tailwind.config.js @@ -212,13 +208,13 @@ export default { }; ``` - + ### Add Tailwind to Your CSS Finally, you'll need to add CSS directives to add each Tailwind layer to `src/style.css`. Since Storefront UI fits into your Tailwind workflow, you'll need to add Tailwind's base, components, and utilities layers to your CSS. - + ```css /* src/style.css */ @@ -227,17 +223,17 @@ Finally, you'll need to add CSS directives to add each Tailwind layer to `src/st @tailwind utilities; ``` - + ### You're Ready to Go! Now, you can import Storefront UI components in your app and all the Tailwind utilities from the `@storefront-ui/react` library will be available in your project. - -<<<../../preview/next/pages/showcases/Button/ButtonBlock.tsx#source - +<<<../../../../preview/next/pages/showcases/Button/ButtonBlock.tsx#source + + -:::::: +:: diff --git a/apps/docs/components/vue/getting-started.md b/apps/docs/components/content/2.getting-started/vue.md similarity index 93% rename from apps/docs/components/vue/getting-started.md rename to apps/docs/components/content/2.getting-started/vue.md index 0445d0956d..a6741fdab9 100644 --- a/apps/docs/components/vue/getting-started.md +++ b/apps/docs/components/content/2.getting-started/vue.md @@ -1,7 +1,5 @@ --- -layout: DefaultLayout -hideBreadcrumbs: true -tabOptions: [nuxt,vite,astro] +navigation: false --- # Installation @@ -16,8 +14,9 @@ You can try out Storefront UI in your browser with our online playground. +::tabs{:titles='["Vite", "Nuxt", "Astro"]' class="mt-8"} -:::::: slot vite +#tab-1 ## Vite + Vue 3 @@ -66,10 +65,10 @@ npx tailwindcss init -p Storefront UI plugs into your Tailwind configuration to add any base styles and CSS variables. To do this, you need to import the Storefront UI Tailwind preset and add it to your `tailwind.config.js` file. -::: tip Add a path to your installed package +::tip Add a path to your installed package In order for Tailwind to properly detect the utility classes used in Storefront UI components, you need to add a path to wherever your `node_modules` folder is located to the `content` property. In the example below, we're using the default location for `node_modules`, but this may change if you're working in a monorepo. -::: +:: ```ts // tailwind.config.js @@ -103,17 +102,16 @@ Finally, you'll need to add CSS directives to add each Tailwind layer to `src/st Now, you can import Storefront UI components in your app and all the Tailwind utilities from the `@storefront-ui/vue` library will be available in your project. - -<<<../../preview/nuxt/pages/showcases/Button/ButtonBlock.vue - +<<<../../../../preview/nuxt/pages/showcases/Button/ButtonBlock.vue + + -:::::: +#tab-2 -:::::: slot nuxt ## Nuxt 3 If you prefer video guides, we have a quick video that can help you set up Storefront UI in your Nuxt 3 project. @@ -150,10 +148,10 @@ export default defineNuxtConfig({ Storefront UI plugs into your Tailwind configuration to add any base styles and CSS variables. To do this, you need to import the Storefront UI Tailwind preset and add it to your `tailwind.config.ts` file. -::: tip Add a path to your installed package +::tip Add a path to your installed package In order for Tailwind to properly detect the utility classes used in Storefront UI components, you need to add a path to wherever your `node_modules` folder is located to the `content` property. In the example below, we're using the default location for `node_modules`, but this may change if you're working in a monorepo. -::: +:: ```ts // tailwind.config.ts @@ -181,17 +179,15 @@ Finally, you'll need to add CSS directives to add each Tailwind layer to `src/st Now, you can import Storefront UI components in your app and all the Tailwind utilities from the `@storefront-ui/vue` library will be available in your project. - -<<<../../preview/nuxt/pages/showcases/Button/ButtonBlock.vue - +<<<../../../../preview/nuxt/pages/showcases/Button/ButtonBlock.vue - -::::::: -:::::: slot astro + + +#tab-3 ## Astro + Vue @@ -233,10 +229,10 @@ pnpm add -D @storefront-ui/vue Storefront UI plugs into your Tailwind configuration to add any base styles and CSS variables. To do this, you need to import the Storefront UI Tailwind preset and add it to your `tailwind.config.cjs` file. -::: tip Add a path to your installed package +::tip Add a path to your installed package In order for Tailwind to properly detect the utility classes used in Storefront UI components, you need to add a path to wherever your `node_modules` folder is located to the `content` property. In the example below, we're using the default location for `node_modules`, but this may change if you're working in a monorepo. -::: +:: ```js // tailwind.config.cjs @@ -269,13 +265,13 @@ Finally, you'll need to add CSS directives to add each Tailwind layer to `src/st You can now import Storefront UI components inside your Astro project! You can either use them directly in your Astro components or import them into your Vue components. - -<<<../../preview/nuxt/pages/showcases/Button/ButtonBlock.vue - +<<<../../../../preview/nuxt/pages/showcases/Button/ButtonBlock.vue + + + - ```md --- @@ -285,10 +281,10 @@ import { SfButton } from '@storefront-ui/vue'; Hello ``` - -::: tip Need interaction? + +::tip Need interaction? If you need interaction, you can create your own Vue components that use Storefront UI components under the hood. You can then import these components into your Astro components and use them as you would any other Vue component. Read more about Vue components in Astro in Astro's [Framework Components guide](https://docs.astro.build/en/core-concepts/framework-components/). -::: +:: -:::::: +:: diff --git a/apps/docs/components/customization/overriding-default-styles.md b/apps/docs/components/content/3.customization/overriding-default-styles.md similarity index 84% rename from apps/docs/components/customization/overriding-default-styles.md rename to apps/docs/components/content/3.customization/overriding-default-styles.md index 028dc51e54..605cfee8d8 100644 --- a/apps/docs/components/customization/overriding-default-styles.md +++ b/apps/docs/components/content/3.customization/overriding-default-styles.md @@ -1,17 +1,12 @@ ---- -layout: DefaultLayout -hideBreadcrumbs: true ---- - # Overriding Default Styles By default, Storefront UI comes equipped with some styles that can help accelerate your initial component development. While this can be a great way to build something beautiful quickly, there will be times when you'll want to override them to match your design system. ## Customization Methods - +::vue-only - +:: ### Important Classes @@ -22,14 +17,14 @@ For example, the `SfLoaderCircular` component defaults to using `primary-700` as - - -<<<../../preview/nuxt/pages/showcases/LoaderCircular/LoaderCircularColors.vue - - -<<<../../preview/next/pages/showcases/LoaderCircular/LoaderCircularColors.tsx - - + +::vue-only +<<<../../../../preview/nuxt/pages/showcases/LoaderCircular/LoaderCircularColors.vue +:: +::react-only +<<<../../../../preview/next/pages/showcases/LoaderCircular/LoaderCircularColors.tsx +:: + @@ -39,8 +34,10 @@ For global changes, you can customize the Tailwind configuration to make changes The most common use case for this is to change the default color palette to better match your design. Storefront UI adds additional colors to your Tailwind configuration, which can help you build out multiple themes for your site. + + :::read-more -Learn all about Storefront UI's color palette and how to customize it in our [Theming](/react/customization/theming)[Theming](/vue/customization/theming) guide. +Learn all about Storefront UI's color palette and how to customize it in our [Theming](/customization/theming) guide. ::: diff --git a/apps/docs/components/content/3.customization/prose.md b/apps/docs/components/content/3.customization/prose.md new file mode 100644 index 0000000000..1da39fbe90 --- /dev/null +++ b/apps/docs/components/content/3.customization/prose.md @@ -0,0 +1,124 @@ +# Prose styling + +One of the prominent features of the Tailwind Typography plugin is the ```prose``` class. The ```prose``` class is designed to create a consistent and readable typographic style for large blocks of text, such as paragraphs, articles, blog posts, or any other content-heavy sections of your website. + +When you apply the prose class to a container element, it automatically applies a set of carefully crafted styles to enhance the readability and overall aesthetics of the text. Examples of the mentioned styles can be found below. + +## Headings + +Styles for `

    `, `

    `, `

    ` and `

    ` are applied out of the box when ```prose``` class is applied to the container. + +::showcase{showcase-name="Typography/Headings" style="min-height:400px"} + +::vue-only +<<<../../../../preview/nuxt/pages/showcases/Typography/Headings.vue +:: +::react-only +<<<../../../../preview/next/pages/showcases/Typography/Headings.tsx +:: + +:: + +## Leadings + +To apply leading text style,```lead``` class must be assigned to the chosen tag. + +::showcase{showcase-name="Typography/Leading" style="min-height:200px"} + +::vue-only +<<<../../../../preview/nuxt/pages/showcases/Typography/Leading.vue +:: +::react-only +<<<../../../../preview/next/pages/showcases/Typography/Leading.tsx +:: + +:: + +## Paragraph + +Simple paragraph styling. + +::showcase{showcase-name="Typography/Paragraph" style="min-height:200px"} + +::vue-only +<<<../../../../preview/nuxt/pages/showcases/Typography/Paragraph.vue +:: +::react-only +<<<../../../../preview/next/pages/showcases/Typography/Paragraph.tsx +:: + +:: + +## Quote + +For quotes, please use `
    ` tag and `
    ` for signature. + +::showcase{showcase-name="Typography/Quote" style="min-height:200px"} + +::vue-only +<<<../../../../preview/nuxt/pages/showcases/Typography/Quote.vue +:: +::react-only +<<<../../../../preview/next/pages/showcases/Typography/Quote.tsx +:: + +:: + +## Figure + +Figure is an example of image using `
    ` for capturing the picture. + +::showcase{showcase-name="Typography/Figure" style="min-height:400px"} + +::vue-only +<<<../../../../preview/nuxt/pages/showcases/Typography/Figure.vue +:: +::react-only +<<<../../../../preview/next/pages/showcases/Typography/Figure.tsx +:: + +:: + +## Table + +Simple example of styling tables of contents. + +::showcase{showcase-name="Typography/Table" style="min-height:200px"} + +::vue-only +<<<../../../../preview/nuxt/pages/showcases/Typography/Table.vue +:: +::react-only +<<<../../../../preview/next/pages/showcases/Typography/Table.tsx +:: + +:: + +## List + +Simple example of styling the lists. + +::showcase{showcase-name="Typography/List" style="min-height:200px"} + +::vue-only +<<<../../../../preview/nuxt/pages/showcases/Typography/List.vue +:: +::react-only +<<<../../../../preview/next/pages/showcases/Typography/List.tsx +:: + +:: + +## Example content styled with `prose` + +::showcase{showcase-name="Typography/TypographyDefault" style="min-height:1800px"} + +::vue-only +<<<../../../../preview/nuxt/pages/showcases/Typography/TypographyDefault.vue +:: +::react-only +<<<../../../../preview/next/pages/showcases/Typography/TypographyDefault.tsx +:: + +:: + diff --git a/apps/docs/components/customization/theming.md b/apps/docs/components/content/3.customization/theming.md similarity index 98% rename from apps/docs/components/customization/theming.md rename to apps/docs/components/content/3.customization/theming.md index a52b160b73..ad5d238ffd 100644 --- a/apps/docs/components/customization/theming.md +++ b/apps/docs/components/content/3.customization/theming.md @@ -1,8 +1,3 @@ ---- -layout: DefaultLayout -hideBreadcrumbs: true ---- - # Theming UI colors are based on 10-tone Tailwind default color palette, normalized so that each color at the same brightness level meets identical minimum accessibility requirements. @@ -13,7 +8,7 @@ To help you build your storefront, Storefront UI adds additional colors followin In addition to [Tailwind's default colors](https://tailwindcss.com/docs/customizing-colors#default-color-palette), Storefront UI adds the following colors to your theme: - +:color-palette :::tip Want to see our default Tailwind preset? You can see all of the default colors, classes, variants, and more in our [Tailwind preset](https://github.com/vuestorefront/storefront-ui/blob/v2/packages/config/tailwind/index.ts) @@ -63,7 +58,7 @@ The CSS classes for Storefront UI colors follow the pattern of `--colors-{color}
    Full List of CSS Variables - + ```css :root { @@ -152,7 +147,7 @@ The CSS classes for Storefront UI colors follow the pattern of `--colors-{color} --colors-disabled-900: 21 26 22; } ``` - +
    @@ -160,7 +155,7 @@ The CSS classes for Storefront UI colors follow the pattern of `--colors-{color} If you don't need to support multiple themes, or if you'd prefer to use Tailwind variants to implement your themes, you can customize Storefront UI's colors inside of your Tailwind configuration. - + ```js export default { @@ -186,7 +181,7 @@ export default { //... }; ``` - + :::read-more To learn more about the different ways to declare colors in Tailwind, check out the [Tailwind documentation](https://tailwindcss.com/docs/customizing-colors#using-custom-colors). diff --git a/apps/docs/components/customization/typography.md b/apps/docs/components/content/3.customization/typography.md similarity index 98% rename from apps/docs/components/customization/typography.md rename to apps/docs/components/content/3.customization/typography.md index db95e19ed6..302a567490 100644 --- a/apps/docs/components/customization/typography.md +++ b/apps/docs/components/content/3.customization/typography.md @@ -1,8 +1,3 @@ ---- -layout: DefaultLayout -hideBreadcrumbs: true ---- - # Typography ::: warning This guide is for the Storefront UI Typography plugin. @@ -84,7 +79,7 @@ This means that you can use one typography class throughout your app, and if you By default, the plugin uses `typography-` as a prefix for all classes. You can change it by passing the `utilityPrefix` option when initializing the plugin. See the [Changing the class prefix](#changing-the-class-prefix) section for more details. ::: - +:typography-list ## Customization diff --git a/apps/docs/components/content/_blocks/Alert.md b/apps/docs/components/content/_blocks/Alert.md new file mode 100644 index 0000000000..c8c7744a8a --- /dev/null +++ b/apps/docs/components/content/_blocks/Alert.md @@ -0,0 +1,78 @@ +# Alert + +Alert is a notification that keeps people informed of the status of the system and which may or not require the user respond. + +## Alert neutral + +Simple version of alert that has neutral grey color. + + + +::vue-only +<<<../../../../preview/nuxt/pages/showcases/Alert/AlertNeutral.vue +:: +::react-only +<<<../../../../preview/next/pages/showcases/Alert/AlertNeutral.tsx +:: + + + +## Alert positive + +Green color indicates that an action went successful. + + + +::vue-only +<<<../../../../preview/nuxt/pages/showcases/Alert/AlertPositive.vue +:: +::react-only +<<<../../../../preview/next/pages/showcases/Alert/AlertPositive.tsx +:: + + + +## Alert secondary + +This type is informative just like neutral except that its palette is more noticeable. + + + +::vue-only +<<<../../../../preview/nuxt/pages/showcases/Alert/AlertSecondary.vue +:: +::react-only +<<<../../../../preview/next/pages/showcases/Alert/AlertSecondary.tsx +:: + + + +## Alert warning + +Alert can be more descriptive and its content can be splitted into title and description. + + + +::vue-only +<<<../../../../preview/nuxt/pages/showcases/Alert/AlertWarning.vue +:: +::react-only +<<<../../../../preview/next/pages/showcases/Alert/AlertWarning.tsx +:: + + + +## Alert error + +This type is usually used for information displayed when an important problem occurs. + + + +::vue-only +<<<../../../../preview/nuxt/pages/showcases/Alert/AlertError.vue +:: +::react-only +<<<../../../../preview/next/pages/showcases/Alert/AlertError.tsx +:: + + diff --git a/apps/docs/components/content/_blocks/Banners.md b/apps/docs/components/content/_blocks/Banners.md new file mode 100644 index 0000000000..49fcc4be96 --- /dev/null +++ b/apps/docs/components/content/_blocks/Banners.md @@ -0,0 +1,61 @@ +# Banners + +Banners are components that deliver main image and content in various configurations. + +## Horizontal Display + + + +::vue-only +<<<../../../../preview/nuxt/pages/showcases/Banners/DisplayHorizontal.vue +:: +::react-only +<<<../../../../preview/next/pages/showcases/Banners/DisplayHorizontal.tsx +:: + + + +## Vertical Display + +Vertical display block with image and content below or above it. + + + +::vue-only +<<<../../../../preview/nuxt/pages/showcases/Banners/DisplayVertical.vue +:: +::react-only +<<<../../../../preview/next/pages/showcases/Banners/DisplayVertical.tsx +:: + + + +## Multiple vertical Displays + +Four vertical displays in row on desktop. + + + +::vue-only +<<<../../../../preview/nuxt/pages/showcases/Banners/DisplayVerticalMultiple.vue +:: +::react-only +<<<../../../../preview/next/pages/showcases/Banners/DisplayVerticalMultiple.tsx +:: + + + +## Hero + +Hero acts like a layout for your hero section. You can provide main image and any content, as well as background images for mobile and desktop devices. + + + +::vue-only +<<<../../../../preview/nuxt/pages/showcases/Banners/Hero.vue +:: +::react-only +<<<../../../../preview/next/pages/showcases/Banners/Hero.tsx +:: + + diff --git a/apps/docs/components/content/_blocks/Breadcrumbs.md b/apps/docs/components/content/_blocks/Breadcrumbs.md new file mode 100644 index 0000000000..c221a7b89c --- /dev/null +++ b/apps/docs/components/content/_blocks/Breadcrumbs.md @@ -0,0 +1,44 @@ +# Breadcrumbs + +A breadcrumb trail consists of a list of links to the parent pages of the current page in hierarchical order. It helps users find their place. + + + +::vue-only +<<<../../../../preview/nuxt/pages/showcases/Breadcrumbs/Breadcrumbs.vue +:: +::react-only +<<<../../../../preview/next/pages/showcases/Breadcrumbs/Breadcrumbs.tsx +:: + + + +## Breadcrumbs with icon separator + +Breadcrumbs block with icons as a item separator. + + + +::vue-only +<<<../../../../preview/nuxt/pages/showcases/Breadcrumbs/BreadcrumbsSeparator.vue +:: +::react-only +<<<../../../../preview/next/pages/showcases/Breadcrumbs/BreadcrumbsSeparator.tsx +:: + + + +## Breadcrumbs with home icon + +Breadcrumbs block with home icon as the first item. + + + +::vue-only +<<<../../../../preview/nuxt/pages/showcases/Breadcrumbs/BreadcrumbsWithIcon.vue +:: +::react-only +<<<../../../../preview/next/pages/showcases/Breadcrumbs/BreadcrumbsWithIcon.tsx +:: + + diff --git a/apps/docs/components/blocks/Card.md b/apps/docs/components/content/_blocks/Card.md similarity index 53% rename from apps/docs/components/blocks/Card.md rename to apps/docs/components/content/_blocks/Card.md index 314bb953a7..5a45860989 100644 --- a/apps/docs/components/blocks/Card.md +++ b/apps/docs/components/content/_blocks/Card.md @@ -1,29 +1,23 @@ ---- -layout: DefaultLayout -hideBreadcrumbs: true -description: The Card component contains content and actions that inform about a single subject. -hideToc: true ---- # Card -{{ $frontmatter.description }} +The Card component contains content and actions that inform about a single subject. ## Default Card The default card view with a rectangle shaped image, a title, a description and a button for some additional actions. -::: tip +::tip This block contain empty `anchor` element, this specific manipulation adds possibility to navigate with `tab` through whole card. With this structure we can click buttons inside or whole card itself. If root card element would be `anchor` element, we would not have possibility to click `button` inside. -::: +:: - -<<<../../preview/nuxt/pages/showcases/Card/CardDefault.vue - - -<<<../../preview/next/pages/showcases/Card/CardDefault.tsx#source - +::vue-only +<<<../../../../preview/nuxt/pages/showcases/Card/CardDefault.vue +:: +::react-only +<<<../../../../preview/next/pages/showcases/Card/CardDefault.tsx +:: @@ -33,12 +27,12 @@ The category card view with a circle shaped image, and category title, clickable - -<<<../../preview/nuxt/pages/showcases/Card/CategoryCard.vue - - -<<<../../preview/next/pages/showcases/Card/CategoryCard.tsx#source - +::vue-only +<<<../../../../preview/nuxt/pages/showcases/Card/CategoryCard.vue +:: +::react-only +<<<../../../../preview/next/pages/showcases/Card/CategoryCard.tsx +:: @@ -48,11 +42,11 @@ This type of card has only button to interact. - -<<<../../preview/nuxt/pages/showcases/Card/CardFeature.vue - - -<<<../../preview/next/pages/showcases/Card/CardFeature.tsx#source - +::vue-only +<<<../../../../preview/nuxt/pages/showcases/Card/CardFeature.vue +:: +::react-only +<<<../../../../preview/next/pages/showcases/Card/CardFeature.tsx +:: diff --git a/apps/docs/components/content/_blocks/Checkout.md b/apps/docs/components/content/_blocks/Checkout.md new file mode 100644 index 0000000000..83982b3743 --- /dev/null +++ b/apps/docs/components/content/_blocks/Checkout.md @@ -0,0 +1,63 @@ +# Checkout + +Checkout page in one of the most important pages in e-commerce. Usually it contains information about delivery destination, shipping options and payment methods. + +## Address form + +Ease the checkout process for users by providing them with well-structured address form. Form field `Street` provides you an example of how error state could be handled. + + + +::vue-only +<<<../../../../preview/nuxt/pages/showcases/Checkout/CheckoutAddressForm.vue +:: +::react-only +<<<../../../../preview/next/pages/showcases/Checkout/CheckoutAddressForm.tsx +:: + + + +## Delivery options + +Present possible delivery options in a way where your customers can easily see differences and choose the best one for their needs. + + + +::vue-only +<<<../../../../preview/nuxt/pages/showcases/Checkout/CheckoutDeliveryOptions.vue +:: +::react-only +<<<../../../../preview/next/pages/showcases/Checkout/CheckoutDeliveryOptions.tsx +:: + + + +## Payment method + +Let your users pick a payment method of their choice in a nice and clear way. + + + +::vue-only +<<<../../../../preview/nuxt/pages/showcases/Checkout/CheckoutPaymentMethod.vue +:: +::react-only +<<<../../../../preview/next/pages/showcases/Checkout/CheckoutPaymentMethod.tsx +:: + + + +## Contact form + +The contact form for customers provides the way to send email (field with simple validation) and phone number with separate country code. + + + +::vue-only +<<<../../../../preview/nuxt/pages/showcases/Checkout/CheckoutContactForm.vue +:: +::react-only +<<<../../../../preview/next/pages/showcases/Checkout/CheckoutContactForm.tsx +:: + + diff --git a/apps/docs/components/blocks/Combobox.md b/apps/docs/components/content/_blocks/Combobox.md similarity index 69% rename from apps/docs/components/blocks/Combobox.md rename to apps/docs/components/content/_blocks/Combobox.md index c807ba8695..97c0bdc07e 100644 --- a/apps/docs/components/blocks/Combobox.md +++ b/apps/docs/components/content/_blocks/Combobox.md @@ -1,19 +1,12 @@ ---- -layout: DefaultLayout -hideBreadcrumbs: true -description: The Combobox is a specialized input field designed for selecting options from long lists. -hideToc: true ---- - # Combobox The Combobox is a specialized input field designed for selecting from the options list by typing inside. It allows users to speed up selecting by searching from limited number of options provided. -::: read-more -If you need to make this field required, it is crucial to communicate this intention clearly to your end users. You can find more information about [required form fields in our guide here](../blocks/FormFields.html). -::: +::tip +If you need to make this field required, it is crucial to communicate this intention clearly to your end users. You can find more information about [required form fields in our guide here](../blocks/FormFields). +:: ## Accessibility notes @@ -25,11 +18,11 @@ The Basic Combobox block shows how to select one of the country's names from the - -<<<../../preview/nuxt/pages/showcases/Combobox/ComboboxBasic.vue - - -<<<../../preview/next/pages/showcases/Combobox/ComboboxBasic.tsx#source - +::vue-only +<<<../../../../preview/nuxt/pages/showcases/Combobox/ComboboxBasic.vue +:: +::react-only +<<<../../../../preview/next/pages/showcases/Combobox/ComboboxBasic.tsx +:: diff --git a/apps/docs/components/blocks/Filters.md b/apps/docs/components/content/_blocks/Filters.md similarity index 55% rename from apps/docs/components/blocks/Filters.md rename to apps/docs/components/content/_blocks/Filters.md index 8c2b89e63f..075580130a 100644 --- a/apps/docs/components/blocks/Filters.md +++ b/apps/docs/components/content/_blocks/Filters.md @@ -1,12 +1,6 @@ ---- -layout: DefaultLayout -hideToc: true -hideBreadcrumbs: true -description: Product filters are a valuable tool for online shoppers to quickly and easily find the products they are looking for on e-commerce websites. ---- # Filters -{{ $frontmatter.description }} +Product filters are a valuable tool for online shoppers to quickly and easily find the products they are looking for on e-commerce websites. ## Color @@ -14,12 +8,13 @@ Color filters are a type of product filter that allow online shoppers to narrow - -<<<../../preview/nuxt/pages/showcases/Filters/Color.vue - - -<<<../../preview/next/pages/showcases/Filters/Color.tsx#source - +::vue-only +<<<../../../../preview/nuxt/pages/showcases/Filters/Color.vue +:: +::react-only +<<<../../../../preview/next/pages/showcases/Filters/Color.tsx +:: + ## Size @@ -28,12 +23,13 @@ Sizes in category pages are a feature that allows online shoppers to filter thei - -<<<../../preview/nuxt/pages/showcases/Filters/Size.vue - - -<<<../../preview/next/pages/showcases/Filters/Size.tsx#source - +::vue-only +<<<../../../../preview/nuxt/pages/showcases/Filters/Size.vue +:: +::react-only +<<<../../../../preview/next/pages/showcases/Filters/Size.tsx +:: + ## Brand @@ -42,12 +38,13 @@ Brand in category pages are a feature that allows online shoppers to filter thei - -<<<../../preview/nuxt/pages/showcases/Filters/Brand.vue - - -<<<../../preview/next/pages/showcases/Filters/Brand.tsx#source - +::vue-only +<<<../../../../preview/nuxt/pages/showcases/Filters/Brand.vue +:: +::react-only +<<<../../../../preview/next/pages/showcases/Filters/Brand.tsx +:: + ## Price @@ -56,12 +53,13 @@ Price in category pages are a feature that allows online shoppers to filter thei - -<<<../../preview/nuxt/pages/showcases/Filters/Price.vue - - -<<<../../preview/next/pages/showcases/Filters/Price.tsx#source - +::vue-only +<<<../../../../preview/nuxt/pages/showcases/Filters/Price.vue +:: +::react-only +<<<../../../../preview/next/pages/showcases/Filters/Price.tsx +:: + ## Sorting @@ -70,12 +68,12 @@ Sorting in category pages is a feature that allows online shoppers to arrange an - -<<<../../preview/nuxt/pages/showcases/Filters/Sorting.vue - - -<<<../../preview/next/pages/showcases/Filters/Sorting.tsx#source - +::vue-only +<<<../../../../preview/nuxt/pages/showcases/Filters/Sorting.vue +:: +::react-only +<<<../../../../preview/next/pages/showcases/Filters/Sorting.tsx +:: @@ -85,12 +83,12 @@ Category list allows users to browse and select categories of content or product - -<<<../../preview/nuxt/pages/showcases/Filters/Category.vue - - -<<<../../preview/next/pages/showcases/Filters/Category.tsx#source - +::vue-only +<<<../../../../preview/nuxt/pages/showcases/Filters/Category.vue +:: +::react-only +<<<../../../../preview/next/pages/showcases/Filters/Category.tsx +:: @@ -100,12 +98,12 @@ Ratings allows users to filter out specific ratings of products in category. Onl - -<<<../../preview/nuxt/pages/showcases/Filters/Rating.vue - - -<<<../../preview/next/pages/showcases/Filters/Rating.tsx#source - +::vue-only +<<<../../../../preview/nuxt/pages/showcases/Filters/Rating.vue +:: +::react-only +<<<../../../../preview/next/pages/showcases/Filters/Rating.tsx +:: @@ -115,11 +113,11 @@ Filters panel can be customized to suit the specific needs of different applicat - -<<<../../preview/nuxt/pages/showcases/Filters/FiltersSidepanel.vue - - -<<<../../preview/next/pages/showcases/Filters/FiltersSidepanel.tsx#source - +::vue-only +<<<../../../../preview/nuxt/pages/showcases/Filters/FiltersSidepanel.vue +:: +::react-only +<<<../../../../preview/next/pages/showcases/Filters/FiltersSidepanel.tsx +:: diff --git a/apps/docs/components/content/_blocks/Footer.md b/apps/docs/components/content/_blocks/Footer.md new file mode 100644 index 0000000000..a84f98b1bd --- /dev/null +++ b/apps/docs/components/content/_blocks/Footer.md @@ -0,0 +1,16 @@ +# Footer + +The Footer block is used as navigation. Usually it's at the bottom of a page and has elements like links to main information pages, contacts, social media links and links to the privacy policy documents. + +## Footer basic block + + + +::vue-only +<<<../../../../preview/nuxt/pages/showcases/Footer/FooterBasic.vue +:: +::react-only +<<<../../../../preview/next/pages/showcases/Footer/FooterBasic.tsx +:: + + diff --git a/apps/docs/components/content/_blocks/FormFields.md b/apps/docs/components/content/_blocks/FormFields.md new file mode 100644 index 0000000000..8fddc28471 --- /dev/null +++ b/apps/docs/components/content/_blocks/FormFields.md @@ -0,0 +1,18 @@ +# Form fields + +The Form Fields block is designed to showcase the usage of various input types, such as Input, Checkbox, Radio, Select, SelectDropdown, Combobox, Button, etc., using a single form as an example. It demonstrates the application of required fields, indicated by an asterisk (*) next to the label, and handles error validation. + +Forms can be presented as dedicated pages or integrated within modals, cards, or side panels, with the form's context influencing its layout and vertical spacing. Typically, dedicated-page forms can accommodate greater complexity. This block use a responsive grid to drive layout decisions, ensuring optimal display across different screen sizes and devices. + +For further customization of layouts, we recommend referring to our documentation on Modal and Drawer pages. + + + +::vue-only +<<<../../../../preview/nuxt/pages/showcases/FormFields/FormFieldsRequired.vue +:: +::react-only +<<<../../../../preview/next/pages/showcases/FormFields/FormFieldsRequired.tsx +:: + + diff --git a/apps/docs/components/blocks/Gallery.md b/apps/docs/components/content/_blocks/Gallery.md similarity index 67% rename from apps/docs/components/blocks/Gallery.md rename to apps/docs/components/content/_blocks/Gallery.md index d5077defc5..58f62723ba 100644 --- a/apps/docs/components/blocks/Gallery.md +++ b/apps/docs/components/content/_blocks/Gallery.md @@ -1,15 +1,8 @@ ---- -layout: DefaultLayout -hideBreadcrumbs: true -description: The Gallery presents a visually appealing and user-friendly collection of images that can be conveniently viewed and navigated. -hideToc: true - ---- # Gallery -::: warning This is an experimental block +::warning This is an experimental block This block has been built on top of experimental base component. The API and structure of it might change based on user feedback. -::: +:: The Gallery presents a visually appealing and user-friendly collection of images that can be conveniently viewed and navigated. Within the example block, navigation options include "previous/next" arrows and photo thumbnails, providing users with multiple ways to interact with the gallery. These navigation features can be activated through both clicks and hover actions. @@ -25,12 +18,12 @@ Changing an image is provided by hover on the thumbnail or dragging the main ima - -<<<../../preview/nuxt/pages/showcases/Gallery/GalleryVertical.vue - - -<<<../../preview/next/pages/showcases/Gallery/GalleryVertical.tsx#source - +::vue-only +<<<../../../../preview/nuxt/pages/showcases/Gallery/GalleryVertical.vue +:: +::react-only +<<<../../../../preview/next/pages/showcases/Gallery/GalleryVertical.tsx +:: @@ -40,12 +33,12 @@ Changing an image is provided by click on the thumbnail or dragging the main ima - -<<<../../preview/nuxt/pages/showcases/Gallery/GalleryHorizontal.vue - - -<<<../../preview/next/pages/showcases/Gallery/GalleryHorizontal.tsx#source - +::vue-only +<<<../../../../preview/nuxt/pages/showcases/Gallery/GalleryHorizontal.vue +:: +::react-only +<<<../../../../preview/next/pages/showcases/Gallery/GalleryHorizontal.tsx +:: @@ -55,12 +48,12 @@ Changing an image is provided by click on the buttons which are visible after ho - -<<<../../preview/nuxt/pages/showcases/Gallery/GalleryWithBullets.vue - - -<<<../../preview/next/pages/showcases/Gallery/GalleryWithBullets.tsx#source - +::vue-only +<<<../../../../preview/nuxt/pages/showcases/Gallery/GalleryWithBullets.vue +:: +::react-only +<<<../../../../preview/next/pages/showcases/Gallery/GalleryWithBullets.tsx +:: @@ -70,11 +63,11 @@ In this block there is added arrow key navigation. When focus is on one of the t - -<<<../../preview/nuxt/pages/showcases/Gallery/GalleryHorizontalArrowKeyNavigation.vue - - -<<<../../preview/next/pages/showcases/Gallery/GalleryHorizontalArrowKeyNavigation.tsx#source - +::vue-only +<<<../../../../preview/nuxt/pages/showcases/Gallery/GalleryHorizontalArrowKeyNavigation.vue +:: +::react-only +<<<../../../../preview/next/pages/showcases/Gallery/GalleryHorizontalArrowKeyNavigation.tsx +:: diff --git a/apps/docs/components/blocks/MegaMenu.md b/apps/docs/components/content/_blocks/MegaMenu.md similarity index 74% rename from apps/docs/components/blocks/MegaMenu.md rename to apps/docs/components/content/_blocks/MegaMenu.md index 86297be0b3..bbb7d67a0d 100644 --- a/apps/docs/components/blocks/MegaMenu.md +++ b/apps/docs/components/content/_blocks/MegaMenu.md @@ -1,9 +1,3 @@ ---- -layout: DefaultLayout -hideBreadcrumbs: true -description: The MegaMenu provide a convenient way of high-level navigation to users. -hideToc: true ---- # MegaMenu The MegaMenu provide a convenient way of high-level navigation to users. By default, it remains hidden to avoid interrupting the user's browsing experience. It can be activated either through a click or hover action, revealing a large drop-down menu on desktop or a side sheet on mobile devices. This expanded menu not only includes a site-map for easy navigation but also incorporates additional elements such as banners. @@ -20,12 +14,12 @@ MegaMenu complies with the WCAG guidelines for accessibility for menus and menu - -<<<../../preview/next/pages/showcases/MegaMenu/BaseMegaMenu.tsx#source - - -<<<../../preview/nuxt/pages/showcases/MegaMenu/BaseMegaMenu.vue - +::react-only +<<<../../../../preview/next/pages/showcases/MegaMenu/BaseMegaMenu.tsx +:: +::vue-only +<<<../../../../preview/nuxt/pages/showcases/MegaMenu/BaseMegaMenu.vue +:: @@ -35,11 +29,11 @@ Additional navigation bar under the main header helps to find general categories - -<<<../../preview/next/pages/showcases/MegaMenu/MegaMenuNavigation.tsx#source - - -<<<../../preview/nuxt/pages/showcases/MegaMenu/MegaMenuNavigation.vue - +::react-only +<<<../../../../preview/next/pages/showcases/MegaMenu/MegaMenuNavigation.tsx +:: +::vue-only +<<<../../../../preview/nuxt/pages/showcases/MegaMenu/MegaMenuNavigation.vue +:: diff --git a/apps/docs/components/content/_blocks/NavbarBottom.md b/apps/docs/components/content/_blocks/NavbarBottom.md new file mode 100644 index 0000000000..adab6feb18 --- /dev/null +++ b/apps/docs/components/content/_blocks/NavbarBottom.md @@ -0,0 +1,52 @@ +# NavbarBottom + +NavbarBottom block is the navigation element used in mobile view. + +::vue-only +::tip You can make the navbar items links +Each item in the navbar is an [`SfButton`](../components/button) component. This means that you can make each item a link by using the `tag` prop to make it an `a`, `NuxtLink`, or any other element/component. [Learn more about this usage in the component documentation.](../components/button#link-as-a-button) +```html + + Will render as an anchor tag + +``` +:: +:: + +::react-only +::tip You can make the navbar items links +Each item in the navbar is an [`SfButton`](../components/button) component. This means that you can make each item a link by using the `as` prop to make it an `a`, `NuxtLink`, , or any other element/component. [Learn more about this usage in the component documentation.](../components/button#link-as-a-button) +```html + + Will render as an anchor tag + +``` +:: +:: + + +## NavbarBottom with white background + + + +::react-only +<<<../../../../preview/next/pages/showcases/NavbarBottom/NavbarBottom.tsx +:: +::vue-only +<<<../../../../preview/nuxt/pages/showcases/NavbarBottom/NavbarBottom.vue +:: + + + +## NavbarBottom with filled background + + + +::react-only +<<<../../../../preview/next/pages/showcases/NavbarBottom/NavbarBottomFilled.tsx +:: +::vue-only +<<<../../../../preview/nuxt/pages/showcases/NavbarBottom/NavbarBottomFilled.vue +:: + + diff --git a/apps/docs/components/content/_blocks/NavbarTop.md b/apps/docs/components/content/_blocks/NavbarTop.md new file mode 100644 index 0000000000..966d72d25f --- /dev/null +++ b/apps/docs/components/content/_blocks/NavbarTop.md @@ -0,0 +1,59 @@ +# NavbarTop + +The NavbarTop block is used as navigation. Usually it's at the top of a page and has elements like company logo, links to main categories or a menu button, search input and action buttons that can open a cart, wishlist or login modal. + +## NavbarTop with white background + + + +::vue-only +<<<../../../../preview/nuxt/pages/showcases/NavbarTop/NavbarTop.vue +:: +::react-only +<<<../../../../preview/next/pages/showcases/NavbarTop/NavbarTop.tsx +:: + + + +## NavbarTop with filled background + + + +::vue-only +<<<../../../../preview/nuxt/pages/showcases/NavbarTop/NavbarTopFilled.vue +:: +::react-only +<<<../../../../preview/next/pages/showcases/NavbarTop/NavbarTopFilled.tsx +:: + + + +## NavbarTop with white background and simple mobile bar + +The alternate NavbarTop variant designed to work seamlessly with the NavbarBottom, providing a cohesive mobile navigation experience. + +By combining with the NavbarBottom, you can create a unified navigation structure that accommodates both top and bottom navigation elements on mobile devices. This ensures a smooth and intuitive user experience, allowing users to access important navigation options easily. + + + +::vue-only +<<<../../../../preview/nuxt/pages/showcases/NavbarTop/NavbarTopSimpleMobile.vue +:: +::react-only +<<<../../../../preview/next/pages/showcases/NavbarTop/NavbarTopSimpleMobile.tsx +:: + + + +## NavbarTop with filled background and simple mobile bar + + + +::vue-only +<<<../../../../preview/nuxt/pages/showcases/NavbarTop/NavbarTopFilledSimpleMobile.vue +:: +::react-only +<<<../../../../preview/next/pages/showcases/NavbarTop/NavbarTopFilledSimpleMobile.tsx +:: + + diff --git a/apps/docs/components/content/_blocks/NewsletterBox.md b/apps/docs/components/content/_blocks/NewsletterBox.md new file mode 100644 index 0000000000..082f79c889 --- /dev/null +++ b/apps/docs/components/content/_blocks/NewsletterBox.md @@ -0,0 +1,16 @@ +# NewsletterBox + +A NewsletterBox supports a typical e-commerce newsletter subscription process. + +In this example there are two types of alerts: `positive` and `negative`. The first one is shown when a valid email address is passed to the input and submitted. The second one shows up when there already was submitted exactly the same email address. + + + +::vue-only +<<<../../../../preview/nuxt/pages/showcases/NewsletterBox/NewsletterBox.vue +:: +::react-only +<<<../../../../preview/next/pages/showcases/NewsletterBox/NewsletterBox.tsx +:: + + diff --git a/apps/docs/components/content/_blocks/OrderSummary.md b/apps/docs/components/content/_blocks/OrderSummary.md new file mode 100644 index 0000000000..998ba6c802 --- /dev/null +++ b/apps/docs/components/content/_blocks/OrderSummary.md @@ -0,0 +1,24 @@ +# Order Summary + +An order summary shows all order details into a consolidated view. Your customers can easily add a promo code to their order and the change will be visible immediately after applying a valid code. + +In this example there are two types of alerts: `positive` and `error`. +The first one is shown in two cases: +- when a valid promo code - `VSF2020` is passed to the input and applied by clicking on the `Apply` button, +- when added promo code has been removed. +The second alert shows up when passed promo code is not valid. + +:::tip +In order to apply valid promo code use: `VSF2020`. +::: + + + +::vue-only +<<<../../../../preview/nuxt/pages/showcases/OrderSummary/OrderSummary.vue +:: +::react-only +<<<../../../../preview/next/pages/showcases/OrderSummary/OrderSummary.tsx +:: + + diff --git a/apps/docs/components/content/_blocks/Pagination.md b/apps/docs/components/content/_blocks/Pagination.md new file mode 100644 index 0000000000..cf361ab285 --- /dev/null +++ b/apps/docs/components/content/_blocks/Pagination.md @@ -0,0 +1,18 @@ +# Pagination + +Pagination component is a common element to navigate through pages containing many items like products in lists. + +## Pagination + +It is a good idea to use pagination when there are lots of elements to show on the page. + + + +::vue-only +<<<../../../../preview/nuxt/pages/showcases/Pagination/Pagination.vue +:: +::react-only +<<<../../../../preview/next/pages/showcases/Pagination/Pagination.tsx +:: + + diff --git a/apps/docs/components/content/_blocks/ProductCard.md b/apps/docs/components/content/_blocks/ProductCard.md new file mode 100644 index 0000000000..babacd8e40 --- /dev/null +++ b/apps/docs/components/content/_blocks/ProductCard.md @@ -0,0 +1,48 @@ +# ProductCard + +Product Card usage blocks. + +## ProductCard Vertical + +The most popular option for presenting detailed product information in a group. + + + +::vue-only +<<<../../../../preview/nuxt/pages/showcases/ProductCard/ProductCardVertical.vue +:: +::react-only +<<<../../../../preview/next/pages/showcases/ProductCard/ProductCardVertical.tsx +:: + + + +## ProductCard Horizontal + +Present products in checkout summary in a way that customers can have an easy access to increase, decrease and remove particular product. + + + +::vue-only +<<<../../../../preview/nuxt/pages/showcases/ProductCard/ProductCardHorizontal.vue +:: +::react-only +<<<../../../../preview/next/pages/showcases/ProductCard/ProductCardHorizontal.tsx +:: + + + +## Details + +ProductCard details can be used in product details page or to build component used for listing products of many categories. + + + +::vue-only +<<<../../../../preview/nuxt/pages/showcases/ProductCard/Details.vue +:: +::react-only +<<<../../../../preview/next/pages/showcases/ProductCard/Details.tsx +:: + + diff --git a/apps/docs/components/content/_blocks/ProductSlider.md b/apps/docs/components/content/_blocks/ProductSlider.md new file mode 100644 index 0000000000..21e86c2c9a --- /dev/null +++ b/apps/docs/components/content/_blocks/ProductSlider.md @@ -0,0 +1,26 @@ +# ProductSlider + +::warning This is an experimental block +This block has been built on top of experimental base component. The API and structure of it might change based on user feedback. +:: + +The ProductSlider allows for scrollable content with product cards, providing a visually appealing and interactive way to showcase products. +## Accessibility notes + +The ProductSlider supports the use of the keyboard (Tab/shift+Tab) to navigate through images. + +## Basic ProductSlider + +Users can easily navigate through the cards by swiping or using navigation arrows, making it convenient to explore a collection of products within a limited space. The component is responsive and adapts to different devices, ensuring a consistent and enjoyable browsing experience. + + + + +::vue-only +<<<../../../../preview/nuxt/pages/showcases/ProductSlider/Basic.vue +:: +::react-only +<<<../../../../preview/next/pages/showcases/ProductSlider/Basic.tsx +:: + + diff --git a/apps/docs/components/content/_blocks/QuantitySelector.md b/apps/docs/components/content/_blocks/QuantitySelector.md new file mode 100644 index 0000000000..6aeb978930 --- /dev/null +++ b/apps/docs/components/content/_blocks/QuantitySelector.md @@ -0,0 +1,42 @@ +# QuantitySelector + +QuantitySelector allows the selection of a numeric value and the display of any additional information needed. + +## Basic usage + + + +::react-only +<<<../../../../preview/next/pages/showcases/QuantitySelector/QuantitySelector.tsx +:: +::vue-only +<<<../../../../preview/nuxt/pages/showcases/QuantitySelector/QuantitySelector.vue +:: + + + +## With rounded buttons + + + +::vue-only +<<<../../../../preview/nuxt/pages/showcases/QuantitySelector/Rounded.vue +:: +::react-only +<<<../../../../preview/next/pages/showcases/QuantitySelector/Rounded.tsx +:: + + + +## Out of stock + + + +::vue-only +<<<../../../../preview/nuxt/pages/showcases/QuantitySelector/OutOfStock.vue +:: +::react-only +<<<../../../../preview/next/pages/showcases/QuantitySelector/OutOfStock.tsx +:: + + diff --git a/apps/docs/components/blocks/RatingForms.md b/apps/docs/components/content/_blocks/RatingForms.md similarity index 54% rename from apps/docs/components/blocks/RatingForms.md rename to apps/docs/components/content/_blocks/RatingForms.md index 80abf57dd1..ef675b5870 100644 --- a/apps/docs/components/blocks/RatingForms.md +++ b/apps/docs/components/content/_blocks/RatingForms.md @@ -1,12 +1,6 @@ ---- -layout: DefaultLayout -hideBreadcrumbs: true -description: The e-commerce rating and review solution provides a platform for users to rate their e-commerce experiences. Users can assign ratings based on their satisfaction, product quality, delivery experience, and other relevant factors. These ratings offer valuable quantitative information that helps other potential buyers gauge the overall reputation and quality of products and services offered on the platform. -hideToc: true ---- # Rating Forms -{{ $frontmatter.description }} +he e-commerce rating and review solution provides a platform for users to rate their e-commerce experiences. Users can assign ratings based on their satisfaction, product quality, delivery experience, and other relevant factors. These ratings offer valuable quantitative information that helps other potential buyers gauge the overall reputation and quality of products and services offered on the platform. ## Product Rating @@ -16,12 +10,12 @@ This block is implemented using `SfRatingButton` and `SfModal` components. If yo - -<<<../../preview/nuxt/pages/showcases/RatingForms/ProductRating.vue - - -<<<../../preview/next/pages/showcases/RatingForms/ProductRating.tsx#source - +::vue-only +<<<../../../../preview/nuxt/pages/showcases/RatingForms/ProductRating.vue +:: +::react-only +<<<../../../../preview/next/pages/showcases/RatingForms/ProductRating.tsx +:: @@ -31,11 +25,11 @@ The Product Rating With Review block provides users with the ability to rate a p - -<<<../../preview/nuxt/pages/showcases/RatingForms/ProductRatingWithReview.vue - - -<<<../../preview/next/pages/showcases/RatingForms/ProductRatingWithReview.tsx#source - +::vue-only +<<<../../../../preview/nuxt/pages/showcases/RatingForms/ProductRatingWithReview.vue +:: +::react-only +<<<../../../../preview/next/pages/showcases/RatingForms/ProductRatingWithReview.tsx +:: diff --git a/apps/docs/components/content/_blocks/Review.md b/apps/docs/components/content/_blocks/Review.md new file mode 100644 index 0000000000..5bcb2bda25 --- /dev/null +++ b/apps/docs/components/content/_blocks/Review.md @@ -0,0 +1,33 @@ +# Review + +Block for displaying user opinion. + +## With Avatar + +Basic Review usage with avatar and [Rating](../components/rating) base component. + + + +::vue-only +<<<../../../../preview/nuxt/pages/showcases/Review/WithAvatar.vue +:: +::react-only +<<<../../../../preview/next/pages/showcases/Review/WithAvatar.tsx +:: + + + +## Truncate/show more + +When description is too long we can truncate it for certain count characters. + + + +::vue-only +<<<../../../../preview/nuxt/pages/showcases/Review/ShowMore.vue +:: +::react-only +<<<../../../../preview/next/pages/showcases/Review/ShowMore.tsx +:: + + diff --git a/apps/docs/components/blocks/Search.md b/apps/docs/components/content/_blocks/Search.md similarity index 63% rename from apps/docs/components/blocks/Search.md rename to apps/docs/components/content/_blocks/Search.md index 3b2933f220..6c6fa7df1e 100644 --- a/apps/docs/components/blocks/Search.md +++ b/apps/docs/components/content/_blocks/Search.md @@ -1,10 +1,3 @@ ---- -layout: DefaultLayout -hideBreadcrumbs: true -description: The Search is a specialized input field designed for text-based searching on a website. -hideToc: true ---- - # Search The Search is a specialized input field designed for text-based searching on a website. In the provided example, the block includes an additional feature that displays live hints suggestions (autocomplete) as the user types. @@ -21,12 +14,12 @@ Simple search with an autocomplete functionality. Give your users hints of what - -<<<../../preview/nuxt/pages/showcases/Search/SearchBasic.vue - - -<<<../../preview/next/pages/showcases/Search/SearchBasic.tsx#source - +::vue-only +<<<../../../../preview/nuxt/pages/showcases/Search/SearchBasic.vue +:: +::react-only +<<<../../../../preview/next/pages/showcases/Search/SearchBasic.tsx +:: @@ -36,12 +29,12 @@ This block enhances search functionality with a custom icon and categorized resu - -<<<../../preview/nuxt/pages/showcases/Search/SearchWithIcon.vue - - -<<<../../preview/next/pages/showcases/Search/SearchWithIcon.tsx#source - +::vue-only +<<<../../../../preview/nuxt/pages/showcases/Search/SearchWithIcon.vue +:: +::react-only +<<<../../../../preview/next/pages/showcases/Search/SearchWithIcon.tsx +:: @@ -51,11 +44,11 @@ This block enhances search functionality with a custom button, categorized resul - -<<<../../preview/nuxt/pages/showcases/Search/SearchWithButton.vue - - -<<<../../preview/next/pages/showcases/Search/SearchWithButton.tsx#source - +::vue-only +<<<../../../../preview/nuxt/pages/showcases/Search/SearchWithButton.vue +:: +::react-only +<<<../../../../preview/next/pages/showcases/Search/SearchWithButton.tsx +:: diff --git a/apps/docs/components/blocks/SelectDropdown.md b/apps/docs/components/content/_blocks/SelectDropdown.md similarity index 58% rename from apps/docs/components/blocks/SelectDropdown.md rename to apps/docs/components/content/_blocks/SelectDropdown.md index 5cf458aa3a..a5dbafafbc 100644 --- a/apps/docs/components/blocks/SelectDropdown.md +++ b/apps/docs/components/content/_blocks/SelectDropdown.md @@ -1,18 +1,12 @@ ---- -layout: DefaultLayout -hideBreadcrumbs: true -description: The SelectDropdown is a visually customized version of the Select component, eliminating the reliance on the native "select" HTML tag. -hideToc: true ---- # Select Dropdown The SelectDropdown is a visually customized version of the Select component, eliminating the reliance on the native "select" HTML tag. Despite the stylistic changes, the functionality of the component remains unchanged, allowing users to make a single selection from a dropdown list. The input can be marked as required and may include hints or additional information. Please note that the example block provided can also serve as a base component, offering flexibility for implementation within the project based on specific requirements and design considerations. -::: read-more -If you need to make this field required, it is crucial to communicate this intention clearly to your end users. You can find more information about [required form fields in our guide here](../blocks/FormFields.html). -::: +::tip +If you need to make this field required, it is crucial to communicate this intention clearly to your end users. You can find more information about [required form fields in our guide here](../blocks/FormFields). +:: ## Accessibility notes @@ -24,12 +18,12 @@ Select Dropdown with preselected option. - -<<<../../preview/nuxt/pages/showcases/SelectDropdown/SelectDropdownPreselected.vue - - -<<<../../preview/next/pages/showcases/SelectDropdown/SelectDropdownPreselected.tsx#source - +::vue-only +<<<../../../../preview/nuxt/pages/showcases/SelectDropdown/SelectDropdownPreselected.vue +:: +::react-only +<<<../../../../preview/next/pages/showcases/SelectDropdown/SelectDropdownPreselected.tsx +:: @@ -38,12 +32,14 @@ Select Dropdown with preselected option. Adding placeholder might be helpful and informative for end users. - -<<<../../preview/nuxt/pages/showcases/SelectDropdown/SelectDropdownWithPlaceholder.vue - - -<<<../../preview/next/pages/showcases/SelectDropdown/SelectDropdownWithPlaceholder.tsx#source - + +::vue-only +<<<../../../../preview/nuxt/pages/showcases/SelectDropdown/SelectDropdownWithPlaceholder.vue +:: +::react-only +<<<../../../../preview/next/pages/showcases/SelectDropdown/SelectDropdownWithPlaceholder.tsx +:: + ## Invalid state @@ -52,12 +48,12 @@ Provide visual cues for end users to indicate occuring error. - -<<<../../preview/nuxt/pages/showcases/SelectDropdown/SelectDropdownError.vue - - -<<<../../preview/next/pages/showcases/SelectDropdown/SelectDropdownError.tsx#source - +::vue-only +<<<../../../../preview/nuxt/pages/showcases/SelectDropdown/SelectDropdownError.vue +:: +::react-only +<<<../../../../preview/next/pages/showcases/SelectDropdown/SelectDropdownError.tsx +:: @@ -67,11 +63,11 @@ Differentiate disabled state to smooth UX experience. In such case, keyboard nav - -<<<../../preview/nuxt/pages/showcases/SelectDropdown/SelectDropdownDisabled.vue - - -<<<../../preview/next/pages/showcases/SelectDropdown/SelectDropdownDisabled.tsx#source - +::vue-only +<<<../../../../preview/nuxt/pages/showcases/SelectDropdown/SelectDropdownDisabled.vue +:: +::react-only +<<<../../../../preview/next/pages/showcases/SelectDropdown/SelectDropdownDisabled.tsx +:: diff --git a/apps/docs/components/blocks/Tabs.md b/apps/docs/components/content/_blocks/Tabs.md similarity index 79% rename from apps/docs/components/blocks/Tabs.md rename to apps/docs/components/content/_blocks/Tabs.md index 1ee3989aa0..9e3e149563 100644 --- a/apps/docs/components/blocks/Tabs.md +++ b/apps/docs/components/content/_blocks/Tabs.md @@ -1,10 +1,3 @@ ---- -layout: DefaultLayout -hideBreadcrumbs: true -description: Description -hideToc: true ---- - # Tabs The Tabs allows users to navigate between related sections of content, providing easy access to information such as product details, customer reviews, or related items. Each tab represents a distinct section, ensuring a seamless and intuitive browsing experience. @@ -21,11 +14,11 @@ The Basic block offers essential tab functionality. This particular variant auto - -<<<../../preview/nuxt/pages/showcases/Tabs/TabsBasic.vue - - -<<<../../preview/next/pages/showcases/Tabs/TabsBasic.tsx#source - +::vue-only +<<<../../../../preview/nuxt/pages/showcases/Tabs/TabsBasic.vue +:: +::react-only +<<<../../../../preview/next/pages/showcases/Tabs/TabsBasic.tsx +:: diff --git a/apps/docs/components/components/accordionitem.md b/apps/docs/components/content/_components/accordionitem.md similarity index 70% rename from apps/docs/components/components/accordionitem.md rename to apps/docs/components/content/_components/accordionitem.md index 8ce9162025..1a2a1b8004 100644 --- a/apps/docs/components/components/accordionitem.md +++ b/apps/docs/components/content/_components/accordionitem.md @@ -1,39 +1,37 @@ ---- -layout: AtomLayout -hideBreadcrumbs: true ---- - # AccordionItem -:::::: slot usage +::tabs{:titles='["Usage", "API", "Source Code"]'} +#tab-1 The `SfAccordionItem` component is a wrapper around the native `
    ` and `` HTML elements. It allows you to create an accordion component that expands and collapses content. The root element of this component is `
    `, and any attributes that you apply onto the `SfAccordionItem` component will be passed to the `
    ` element. The one exception is the `onToggle` attribute. The component prevents the native browser behavior and implements its own `onToggle` handler. -::: read-more +::info See all of the attributes that you can pass to `
    ` in the [MDN Web Docs](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/details). -::: +:: ## Examples ### Basic Accordion - +:::vue-only To control the state of the accordion, you can use the `modelValue` prop. This prop is a boolean that indicates whether the accordion is open or closed. - - +::: + +:::react-only To control the state of the accordion, you can use the `open` prop. This prop is a boolean that indicates whether the accordion is open or closed. - +::: + - -<<<../../preview/nuxt/pages/showcases/AccordionItem/BasicAccordion.vue - - -<<<../../preview/next/pages/showcases/AccordionItem/BasicAccordion.tsx#source - +:::vue-only +<<<../../../../preview/nuxt/pages/showcases/AccordionItem/BasicAccordion.vue +::: +:::react-only +<<<../../../../preview/next/pages/showcases/AccordionItem/BasicAccordion.tsx +::: @@ -43,12 +41,12 @@ This example only allows one item to be open at a time. - -<<<../../preview/nuxt/pages/showcases/AccordionItem/CollapsableAccordion.vue - - -<<<../../preview/next/pages/showcases/AccordionItem/CollapsableAccordion.tsx#source - +:::vue-only +<<<../../../../preview/nuxt/pages/showcases/AccordionItem/CollapsableAccordion.vue +::: +:::react-only +<<<../../../../preview/next/pages/showcases/AccordionItem/CollapsableAccordion.tsx +::: @@ -58,12 +56,13 @@ Animate AccordionItem to give that nice feeling of smooth transition. - -<<<../../preview/nuxt/pages/showcases/AccordionItem/AccordionAnimate.vue - - -<<<../../preview/next/pages/showcases/AccordionItem/AccordionAnimate.tsx#source - +:::vue-only +<<<../../../../preview/nuxt/pages/showcases/AccordionItem/AccordionAnimate.vue +::: + +:::react-only +<<<../../../../preview/next/pages/showcases/AccordionItem/AccordionAnimate.tsx +::: @@ -75,28 +74,30 @@ For example, `` elements are focusable and can be activated by pressing ## Playground - - -:::::: + -::: slot api +#tab-2 ## Props +:::react-only | Prop name | Type | Default value | Possible values | | ----------------- | ------------------------- | ------------- | --------------- | - | `open` | `boolean` | false | | | `summaryClassName` | `string` | | | | `onToggle` | `(open: boolean) => void` | | | | `children` | `ReactNode` | | | - - +::: + + +:::vue-only +| Prop name | Type | Default value | Possible values | +| ----------------- | ------------------------- | ------------- | --------------- | | `modelValue` | `boolean` | false | | | `summaryClass` | `string` | | | - +::: - +:::vue-only ## Slots | Slot name | Description | @@ -109,19 +110,18 @@ For example, `` elements are focusable and can be activated by pressing | Event name | Trigger | | --------------------- | ---------------------------------- | | `update:modelValue` | Triggers when click on the summary | - - ::: -::: slot source - +#tab-3 ## Source code - -<<<../../../packages/sfui/frameworks/vue/components/SfAccordionItem/SfAccordionItem.vue - - -<<<../../../packages/sfui/frameworks/react/components/SfAccordionItem/SfAccordionItem.tsx - +:partial{content="block-callout"} +:::vue-only +<<<../../../../../packages/sfui/frameworks/vue/components/SfAccordionItem/SfAccordionItem.vue +::: +:::react-only +<<<../../../../../packages/sfui/frameworks/react/components/SfAccordionItem/SfAccordionItem.tsx ::: + +:: diff --git a/apps/docs/components/components/badge.md b/apps/docs/components/content/_components/badge.md similarity index 59% rename from apps/docs/components/components/badge.md rename to apps/docs/components/content/_components/badge.md index 2c251dd39f..4d9524853f 100644 --- a/apps/docs/components/components/badge.md +++ b/apps/docs/components/content/_components/badge.md @@ -1,11 +1,8 @@ ---- -layout: AtomLayout -hideBreadcrumbs: true ---- - # Badge -::: slot usage +::tabs{:titles='["Usage", "API", "Source Code"]'} + +#tab-1 ## Examples @@ -14,12 +11,15 @@ hideBreadcrumbs: true The badge component must be wrapped with a container that has `class="relative"`. You must provide such a container by yourself, but it gives you the flexibility to put the badge wherever you want. Bagde comes with a "dot" variant, which hides the content. When given content is of type number (or string that could be parsed to number), you can set a maximum limit of that number using `max` prop. - -<<<../../preview/nuxt/pages/showcases/Badge/BadgeBasic.vue - - -<<<../../preview/next/pages/showcases/Badge/BadgeBasic.tsx#source - + +::vue-only +<<<../../../../preview/nuxt/pages/showcases/Badge/BadgeBasic.vue +:: + +::react-only +<<<../../../../preview/next/pages/showcases/Badge/BadgeBasic.tsx +:: + ### Placement @@ -27,12 +27,14 @@ The badge component must be wrapped with a container that has `class="relative"` You can align the Badge in every corner of the container. - -<<<../../preview/nuxt/pages/showcases/Badge/BadgePlacement.vue - - -<<<../../preview/next/pages/showcases/Badge/BadgePlacement.tsx#source - + +::vue-only +<<<../../../../preview/nuxt/pages/showcases/Badge/BadgePlacement.vue +:: +::react-only +<<<../../../../preview/next/pages/showcases/Badge/BadgePlacement.tsx +:: + ### Custom outline @@ -40,12 +42,14 @@ You can align the Badge in every corner of the container. A nifty effect that makes the Badge a bit more attractive is to add an outline that separates the Badge from an element. - -<<<../../preview/nuxt/pages/showcases/Badge/BadgeOutline.vue - - -<<<../../preview/next/pages/showcases/Badge/BadgeOutline.tsx#source - + +::vue-only +<<<../../../../preview/nuxt/pages/showcases/Badge/BadgeOutline.vue +:: +::react-only +<<<../../../../preview/next/pages/showcases/Badge/BadgeOutline.tsx +:: + ### Avatars @@ -53,12 +57,14 @@ A nifty effect that makes the Badge a bit more attractive is to add an outline t A common use case for the Badge is to place it on a user's avatar. - -<<<../../preview/nuxt/pages/showcases/Badge/BadgeAvatar.vue - - -<<<../../preview/next/pages/showcases/Badge/BadgeAvatar.tsx#source - + +::vue-only +<<<../../../../preview/nuxt/pages/showcases/Badge/BadgeAvatar.vue +:: +::react-only +<<<../../../../preview/next/pages/showcases/Badge/BadgeAvatar.tsx +:: + ## Accessibility Notes @@ -69,33 +75,30 @@ The component itself does not provide any specific accessibility features. Pleas -::: - -::: slot api +#tab-2 ## Props | Prop name | Type | Default value | Possible values | | ----------- | ------------------ | ------------- | ------------------------------------------------------ | -| `content` | `string | number` | | +| `content` | `string` | `number` | | | `max` | `number` | `99` | | | `placement` | `SfBadgePlacement` | `top-right` | `top-right`, `top-left`, `bottom-right`, `bottom-left` | | `variant` | `SfBadgeVariant` | `standard` | `standard`, `dot` | -::: +#tab-3 + +:partial{content="block-callout"} -::: slot source - +::vue-only - +<<<../../../../../packages/sfui/frameworks/vue/components/SfBadge/SfBadge.vue -<<<../../../packages/sfui/frameworks/vue/components/SfBadge/SfBadge.vue +:: +::react-only - - +<<<../../../../../packages/sfui/frameworks/react/components/SfBadge/SfBadge.tsx -<<<../../../packages/sfui/frameworks/react/components/SfBadge/SfBadge.tsx +:: - - -::: +:: diff --git a/apps/docs/components/components/button.md b/apps/docs/components/content/_components/button.md similarity index 52% rename from apps/docs/components/components/button.md rename to apps/docs/components/content/_components/button.md index 7a235e84e9..0172011891 100644 --- a/apps/docs/components/components/button.md +++ b/apps/docs/components/content/_components/button.md @@ -1,11 +1,8 @@ ---- -layout: AtomLayout -hideBreadcrumbs: true ---- - # Button -:::::: slot usage +::tabs{:titles='["Usage", "API", "Source Code"]'} + +#tab-1 `SfButton` is an input that allows for user-triggered actions when clicked or pressed. This can be used for submitting forms, opening/closing dialogs, and much more. @@ -17,12 +14,13 @@ hideBreadcrumbs: true - -<<<../../preview/nuxt/pages/showcases/Button/ButtonSizes.vue - - -<<<../../preview/next/pages/showcases/Button/ButtonSizes.tsx#source - +::vue-only +<<<../../../../preview/nuxt/pages/showcases/Button/ButtonSizes.vue +:: +::react-only +<<<../../../../preview/next/pages/showcases/Button/ButtonSizes.tsx +:: + ### Button variants @@ -31,27 +29,34 @@ hideBreadcrumbs: true - -<<<../../preview/nuxt/pages/showcases/Button/ButtonVariants.vue - - -<<<../../preview/next/pages/showcases/Button/ButtonVariants.tsx#source - +::vue-only +<<<../../../../preview/nuxt/pages/showcases/Button/ButtonVariants.vue +:: +::react-only +<<<../../../../preview/next/pages/showcases/Button/ButtonVariants.tsx +:: + ### Button as a link - -This component can be used as a link (or any other tag) that can be set via `tag``as` prop. +::vue-only +This component can be used as a link (or any other tag) that can be set via the `tag` prop. +:: +::react-only +This component can be used as a link (or any other tag) that can be set via the `as` prop. + +:: - -<<<../../preview/nuxt/pages/showcases/Button/ButtonAsLink.vue - - -<<<../../preview/next/pages/showcases/Button/ButtonAsLink.tsx#source - +::vue-only +<<<../../../../preview/nuxt/pages/showcases/Button/ButtonAsLink.vue +:: +::react-only +<<<../../../../preview/next/pages/showcases/Button/ButtonAsLink.tsx +:: + ### Button block @@ -60,12 +65,13 @@ You can create a full-width button with Tailwind's `w-full` class. - -<<<../../preview/nuxt/pages/showcases/Button/ButtonBlock.vue - - -<<<../../preview/next/pages/showcases/Button/ButtonBlock.tsx#source - +::vue-only +<<<../../../../preview/nuxt/pages/showcases/Button/ButtonBlock.vue +:: +::react-only +<<<../../../../preview/next/pages/showcases/Button/ButtonBlock.tsx +:: + ### Button truncation @@ -74,66 +80,89 @@ You can truncate button content with Tailwind using `max-w-` and `truncate` clas - -<<<../../preview/nuxt/pages/showcases/Button/ButtonTruncation.vue - - -<<<../../preview/next/pages/showcases/Button/ButtonTruncation.tsx#source - +::vue-only +<<<../../../../preview/nuxt/pages/showcases/Button/ButtonTruncation.vue +:: +::react-only +<<<../../../../preview/next/pages/showcases/Button/ButtonTruncation.tsx +:: + ### Button content -`SfButton` provides `prefix` and `suffix` slots`slotPrefix` and `slotSuffix` props that you can use to add custom content before/after your default content. This can be useful for adding icons or badges to your buttons. +::vue-only +`SfButton` provides `prefix` and `suffix` slots that you can use to add custom content before/after your default content. This can be useful for adding icons or badges to your buttons. + +:: +::react-only +`SfButton` provides `slotPrefix` and `slotSuffix` props that you can use to add custom content before/after your default content. This can be useful for adding icons or badges to your buttons. + +:: - -<<<../../preview/nuxt/pages/showcases/Button/ButtonContent.vue - - -<<<../../preview/next/pages/showcases/Button/ButtonContent.tsx#source - +::vue-only +<<<../../../../preview/nuxt/pages/showcases/Button/ButtonContent.vue +:: +::react-only +<<<../../../../preview/next/pages/showcases/Button/ButtonContent.tsx +:: + ## Accessibility notes -Button component can be rendered as `