@eturnity/eturnity_reusable_components 9.3.1-EPDM-13987.1 → 9.3.1-EPDM-1744.5

package/src/components/buttons/collection/index.vue

@@ -1,355 +0,0 @@
-<template>
-  <PageWrapper>
-    <PageTitle>ButtonIcon Collection</PageTitle>
-
-    <GridContainer>
-      <!-- Light Theme Column -->
-      <ThemeSection :is-dark="false">
-        <ThemeTitle>Light Theme</ThemeTitle>
-
-        <!-- Header Row -->
-        <HeaderRow>
-          <HeaderCell
-            v-for="buttonType in types"
-            :key="'light-header-' + buttonType"
-          >
-            {{ buttonType }}
-          </HeaderCell>
-        </HeaderRow>
-
-        <!-- Main Variant Section -->
-        <VariantSection>
-          <VariantHeader :cols="types.length">main</VariantHeader>
-        </VariantSection>
-
-        <!-- States for Main variant -->
-        <StateSection v-for="state in states" :key="'light-main-' + state.name">
-          <StateHeader :cols="types.length">{{ state.name }}</StateHeader>
-          <ButtonRow>
-            <ButtonCell
-              v-for="buttonType in types"
-              :key="'light-main-' + buttonType + '-' + state.name"
-            >
-              <ButtonIcon
-                app-theme="light"
-                icon-name="plus_button"
-                :is-active="state.isActive"
-                :is-disabled="state.isDisabled"
-                :is-hovered="state.isHovered"
-                :text="buttonType"
-                :type="buttonType"
-                variant="main"
-              />
-            </ButtonCell>
-          </ButtonRow>
-        </StateSection>
-
-        <!-- Cancel Variant Section -->
-        <VariantSection>
-          <VariantHeader :cols="types.length">cancel</VariantHeader>
-        </VariantSection>
-
-        <!-- States for Cancel variant -->
-        <StateSection
-          v-for="state in states"
-          :key="'light-cancel-' + state.name"
-        >
-          <StateHeader :cols="types.length">{{ state.name }}</StateHeader>
-          <ButtonRow>
-            <ButtonCell
-              v-for="buttonType in types"
-              :key="'light-cancel-' + buttonType + '-' + state.name"
-            >
-              <ButtonIcon
-                app-theme="light"
-                icon-name="plus_button"
-                :is-active="state.isActive"
-                :is-disabled="state.isDisabled"
-                :is-hovered="state.isHovered"
-                :text="buttonType"
-                :type="buttonType"
-                variant="cancel"
-              />
-            </ButtonCell>
-          </ButtonRow>
-        </StateSection>
-      </ThemeSection>
-
-      <!-- Dark Theme Column -->
-      <ThemeSection :is-dark="true">
-        <ThemeTitle :is-dark="true">Dark Theme</ThemeTitle>
-
-        <!-- Header Row -->
-        <HeaderRow :is-dark="true">
-          <HeaderCell
-            v-for="buttonType in types"
-            :key="'dark-header-' + buttonType"
-            :is-dark="true"
-          >
-            {{ buttonType }}
-          </HeaderCell>
-        </HeaderRow>
-
-        <!-- Main Variant Section -->
-        <VariantSection>
-          <VariantHeader :cols="types.length" :is-dark="true">
-            main
-          </VariantHeader>
-        </VariantSection>
-
-        <!-- States for Main variant -->
-        <StateSection v-for="state in states" :key="'dark-main-' + state.name">
-          <StateHeader :cols="types.length" :is-dark="true">
-            {{ state.name }}
-          </StateHeader>
-          <ButtonRow>
-            <ButtonCell
-              v-for="buttonType in types"
-              :key="'dark-main-' + buttonType + '-' + state.name"
-            >
-              <ButtonIcon
-                app-theme="dark"
-                icon-name="plus_button"
-                :is-active="state.isActive"
-                :is-disabled="state.isDisabled"
-                :is-hovered="state.isHovered"
-                :text="buttonType"
-                :type="buttonType"
-                variant="main"
-              />
-            </ButtonCell>
-          </ButtonRow>
-        </StateSection>
-
-        <!-- Cancel Variant Section -->
-        <VariantSection>
-          <VariantHeader :cols="types.length" :is-dark="true">
-            cancel
-          </VariantHeader>
-        </VariantSection>
-
-        <!-- States for Cancel variant -->
-        <StateSection
-          v-for="state in states"
-          :key="'dark-cancel-' + state.name"
-        >
-          <StateHeader :cols="types.length" :is-dark="true">
-            {{ state.name }}
-          </StateHeader>
-          <ButtonRow>
-            <ButtonCell
-              v-for="buttonType in types"
-              :key="'dark-cancel-' + buttonType + '-' + state.name"
-            >
-              <ButtonIcon
-                app-theme="dark"
-                icon-name="plus_button"
-                :is-active="state.isActive"
-                :is-disabled="state.isDisabled"
-                :is-hovered="state.isHovered"
-                :text="buttonType"
-                :type="buttonType"
-                variant="cancel"
-              />
-            </ButtonCell>
-          </ButtonRow>
-        </StateSection>
-      </ThemeSection>
-    </GridContainer>
-  </PageWrapper>
-</template>
-
-<script>
-  import ButtonIcon from '../buttonIcon/index.vue'
-  import styled from 'vue3-styled-components'
-  import theme from '@/assets/theme'
-
-  const PageWrapper = styled.div`
-    padding: 40px;
-    font-family: ${(props) => props.theme.fonts.mainFont};
-    background: linear-gradient(135deg, #f8f9fb 0%, #ebeef3 100%);
-    min-height: 100vh;
-  `
-
-  const PageTitle = styled.h1`
-    text-align: center;
-    font-size: 32px;
-    font-weight: 700;
-    color: ${(props) => props.theme.semanticColors.teal[800]};
-    margin-bottom: 40px;
-    letter-spacing: -0.5px;
-  `
-
-  const GridContainer = styled.div`
-    display: grid;
-    grid-template-columns: 1fr 1fr;
-    gap: 32px;
-    max-width: 1600px;
-    margin: 0 auto;
-  `
-
-  const ThemeSectionAttrs = { isDark: Boolean }
-  const ThemeSection = styled('div', ThemeSectionAttrs)`
-    background-color: ${(props) =>
-      props.isDark
-        ? props.theme.semanticColors.teal[800]
-        : props.theme.colors.white};
-    border-radius: 16px;
-    padding: 24px;
-    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
-    border: 1px solid
-      ${(props) =>
-        props.isDark ? 'transparent' : props.theme.semanticColors.grey[300]};
-  `
-
-  const ThemeTitleAttrs = { isDark: Boolean }
-  const ThemeTitle = styled('h2', ThemeTitleAttrs)`
-    text-align: center;
-    font-size: 22px;
-    font-weight: 600;
-    margin-bottom: 20px;
-    padding-bottom: 12px;
-    border-bottom: 2px solid
-      ${(props) =>
-        props.isDark
-          ? props.theme.semanticColors.teal[600]
-          : props.theme.semanticColors.purple[200]};
-    color: ${(props) =>
-      props.isDark
-        ? props.theme.colors.white
-        : props.theme.semanticColors.teal[800]};
-  `
-
-  const HeaderRowAttrs = { isDark: Boolean }
-  const HeaderRow = styled('div', HeaderRowAttrs)`
-    display: grid;
-    grid-template-columns: repeat(4, 1fr);
-    gap: 12px;
-    margin-bottom: 8px;
-  `
-
-  const HeaderCellAttrs = { isDark: Boolean }
-  const HeaderCell = styled('div', HeaderCellAttrs)`
-    font-size: 11px;
-    font-weight: 700;
-    text-transform: uppercase;
-    letter-spacing: 1px;
-    text-align: center;
-    padding: 10px 4px;
-    border-radius: 6px;
-    background: ${(props) =>
-      props.isDark
-        ? props.theme.semanticColors.teal[700]
-        : props.theme.semanticColors.purple[50]};
-    color: ${(props) =>
-      props.isDark
-        ? props.theme.semanticColors.purple[200]
-        : props.theme.semanticColors.purple[600]};
-  `
-
-  const VariantSection = styled.div`
-    margin-top: 16px;
-  `
-
-  const VariantHeaderAttrs = { cols: Number, isDark: Boolean }
-  const VariantHeader = styled('div', VariantHeaderAttrs)`
-    font-size: 12px;
-    font-weight: 600;
-    text-transform: capitalize;
-    padding: 8px 12px;
-    border-radius: 6px;
-    text-align: center;
-    margin-bottom: 8px;
-    background: ${(props) =>
-      props.isDark
-        ? props.theme.semanticColors.teal[600]
-        : props.theme.semanticColors.grey[200]};
-    color: ${(props) =>
-      props.isDark
-        ? props.theme.semanticColors.yellow[300]
-        : props.theme.semanticColors.teal[700]};
-  `
-
-  const StateSection = styled.div`
-    margin-bottom: 4px;
-  `
-
-  const StateHeaderAttrs = { cols: Number, isDark: Boolean }
-  const StateHeader = styled('div', StateHeaderAttrs)`
-    font-size: 10px;
-    font-weight: 500;
-    text-transform: uppercase;
-    letter-spacing: 0.8px;
-    padding: 4px 0;
-    color: ${(props) =>
-      props.isDark
-        ? props.theme.semanticColors.grey[400]
-        : props.theme.semanticColors.grey[600]};
-  `
-
-  const ButtonRow = styled.div`
-    display: grid;
-    grid-template-columns: repeat(4, 1fr);
-    gap: 12px;
-    align-items: center;
-  `
-
-  const ButtonCell = styled.div`
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    min-height: 36px;
-  `
-
-  export default {
-    name: 'ButtonIconCollection',
-    components: {
-      ButtonIcon,
-      PageWrapper,
-      PageTitle,
-      GridContainer,
-      ThemeSection,
-      ThemeTitle,
-      HeaderRow,
-      HeaderCell,
-      VariantSection,
-      VariantHeader,
-      StateSection,
-      StateHeader,
-      ButtonRow,
-      ButtonCell,
-    },
-    data() {
-      return {
-        theme,
-        types: ['primary', 'secondary', 'tertiary', 'ghost'],
-        states: [
-          {
-            name: 'default',
-            isActive: false,
-            isHovered: false,
-            isDisabled: false,
-          },
-          {
-            name: 'hover',
-            isActive: false,
-            isHovered: true,
-            isDisabled: false,
-          },
-          {
-            name: 'active',
-            isActive: true,
-            isHovered: false,
-            isDisabled: false,
-          },
-          {
-            name: 'disabled',
-            isActive: false,
-            isHovered: false,
-            isDisabled: true,
-          },
-        ],
-      }
-    },
-  }
-</script>