hp-design-system 1.0.20 → 1.0.22

package/src/components/icons/iconList/IconList.vue

@@ -1,172 +0,0 @@
-<template>
-  <div :class="{ dark: isDarkMode }">
-    <h1>A - Brands</h1>
-
-    <h3>AA - Social Media</h3>
-    <IconListButton
-      :icons="socialMediaIcons"
-      :color="color"
-      :is-dark-mode="isDarkMode"
-    />
-
-    <h3>AB - Communication</h3>
-    <IconListButton
-      :icons="communicationIcons"
-      :color="color"
-      :is-dark-mode="isDarkMode"
-    />
-
-    <h3>AC - Tech</h3>
-    <IconListButton
-      :icons="techIcons"
-      :color="color"
-      :is-dark-mode="isDarkMode"
-    />
-
-    <h3>AD - Development</h3>
-    <IconListButton
-      :icons="developmentIcons"
-      :color="color"
-      :is-dark-mode="isDarkMode"
-    />
-
-    <h3>AE - Others</h3>
-    <IconListButton
-      :icons="otherBrandIcons"
-      :color="color"
-      :is-dark-mode="isDarkMode"
-    />
-
-    <h1>B - Digital</h1>
-
-    <h3>BA - Menu</h3>
-    <IconListButton
-      :icons="menuIcons"
-      :color="color"
-      :is-dark-mode="isDarkMode"
-    />
-
-    <h3>BB - Arrow</h3>
-    <IconListButton
-      :icons="arrowIcons"
-      :color="color"
-      :is-dark-mode="isDarkMode"
-    />
-
-    <h3>BC - User</h3>
-    <IconListButton
-      :icons="userIcons"
-      :color="color"
-      :is-dark-mode="isDarkMode"
-    />
-
-    <h3>BD - Tool</h3>
-    <IconListButton
-      :icons="toolsIcons"
-      :color="color"
-      :is-dark-mode="isDarkMode"
-    />
-
-    <h3>BE - Symbol</h3>
-    <IconListButton
-      :icons="symbolsIcons"
-      :color="color"
-      :is-dark-mode="isDarkMode"
-    />
-
-    <h3>BF - Action</h3>
-    <IconListButton
-      :icons="actionsIcons"
-      :color="color"
-      :is-dark-mode="isDarkMode"
-    />
-
-    <h3>BG - Others</h3>
-    <IconListButton
-      :icons="otherDigitalIcons"
-      :color="color"
-      :is-dark-mode="isDarkMode"
-    />
-
-    <h1>D - Places</h1>
-    <IconListButton
-      :icons="placeIcons"
-      :color="color"
-      :is-dark-mode="isDarkMode"
-    />
-
-    <!-- <h1>C - Objects</h1> -->
-    <!-- <h1>E - Company</h1> -->
-  </div>
-</template>
-
-<script setup>
-import { computed } from 'vue'
-import IconListButton from './components/IconListButton.vue'
-import AllIcons from '@assets/icons/icons.json'
-
-const props = defineProps({
-  color: {
-    type: String,
-    default: '#757abf'
-  }
-})
-
-const isDarkMode = computed(() => {
-  const element = document.getElementsByClassName('docs-story')[0]
-  const backgroundColor = window.getComputedStyle(element).backgroundColor
-  return backgroundColor === 'rgb(51, 51, 51)'
-})
-
-const socialMediaIcons = computed(() =>
-  AllIcons.filter((name) => name.startsWith('AA')).sort()
-)
-const communicationIcons = computed(() =>
-  AllIcons.filter((name) => name.startsWith('AB')).sort()
-)
-const techIcons = computed(() =>
-  AllIcons.filter((name) => name.startsWith('AC')).sort()
-)
-const developmentIcons = computed(() =>
-  AllIcons.filter((name) => name.startsWith('AD')).sort()
-)
-const otherBrandIcons = computed(() =>
-  AllIcons.filter((name) => name.startsWith('AE')).sort()
-)
-const menuIcons = computed(() =>
-  AllIcons.filter((name) => name.startsWith('BA')).sort()
-)
-const arrowIcons = computed(() =>
-  AllIcons.filter((name) => name.startsWith('BB')).sort()
-)
-const userIcons = computed(() =>
-  AllIcons.filter((name) => name.startsWith('BC')).sort()
-)
-const toolsIcons = computed(() =>
-  AllIcons.filter((name) => name.startsWith('BD')).sort()
-)
-const symbolsIcons = computed(() =>
-  AllIcons.filter((name) => name.startsWith('BE')).sort()
-)
-const actionsIcons = computed(() =>
-  AllIcons.filter((name) => name.startsWith('BF')).sort()
-)
-const otherDigitalIcons = computed(() =>
-  AllIcons.filter((name) => name.startsWith('BG')).sort()
-)
-const placeIcons = computed(() =>
-  AllIcons.filter((name) => name.startsWith('C')).sort()
-)
-</script>
-
-<style lang="scss" scoped>
-.dark h1,
-.dark h3 {
-  color: white;
-}
-
-h1,
-h3 {
-  color: black;
-}
-</style>

package/src/components/icons/iconList/components/IconListButton.vue

@@ -1,71 +0,0 @@
-<template>
-  <div style="display: flex; flex-wrap: wrap; gap: 16px">
-    <div v-for="(icon, id) in icons" :key="id" style="text-align: center">
-      <div
-        style="margin-top: 8px; display: flex; align-items: center; gap: 8px"
-      >
-        <button @click="copyToClipboard(icon)" class="icon-button">
-          <Icon :name="icon" size="lg" :color="color" />
-          <span :class="{ 'label-white': isDarkMode }">{{ icon }}</span>
-        </button>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script lang="ts" setup>
-import Icon from '../../icon/Icon.vue'
-
-defineProps({
-  isDarkMode: {
-    type: Boolean,
-    required: true
-  },
-  icons: {
-    type: Array<string>,
-    required: true
-  },
-  color: {
-    type: String,
-    required: true
-  }
-})
-
-const copyToClipboard = (text: string) => {
-  navigator.clipboard
-    .writeText(text)
-    .then(() => {
-      alert('Ícone copiado!')
-    })
-    .catch((error) => {
-      console.error('Failed to copy text: ', error)
-    })
-}
-</script>
-
-<style scoped>
-.icon-button {
-  width: 100px;
-  display: flex;
-  cursor: pointer;
-  border: none;
-  background-color: transparent;
-  flex-direction: column;
-  align-items: center;
-  gap: 12px;
-  transition: transform 0.2s ease-in-out;
-}
-
-.icon-button:hover {
-  transform: scale(1.1);
-}
-
-span {
-  font-family: 'Quicksand';
-  font-weight: 600;
-}
-
-.label-white {
-  color: white;
-}
-</style>

package/src/components/index.ts

@@ -1,6 +0,0 @@
-import HpButton from './button/Button.vue'
-import HpCheckbox from './inputs/checkbox/Checkbox.vue'
-import HpIcon from './icons/icon/Icon.vue'
-import HpTeste from './teste/Teste.vue'
-
-export { HpButton, HpCheckbox, HpIcon, HpTeste }

package/src/components/inputs/checkbox/Checkbox.scss

@@ -1,91 +0,0 @@
-.checkbox {
-  display: flex;
-  align-items: center;
-  flex-direction: row;
-}
-
-.checkbox .check {
-  -webkit-user-select: none;
-  user-select: none;
-  -webkit-tap-highlight-color: transparent;
-  cursor: pointer;
-}
-.checkbox .check span {
-  display: inline-block;
-  vertical-align: middle;
-  transform: translate3d(0, 0, 0);
-}
-.checkbox .check span:first-child {
-  position: relative;
-  width: 24px;
-  height: 24px;
-  border-radius: 50%;
-  transform: scale(1);
-  vertical-align: middle;
-  border: 1px solid rgb(255 255 255 / 10%);
-  transition: all 0.2s ease;
-}
-.checkbox .check span:first-child svg {
-  position: absolute;
-  z-index: 1;
-  top: 8px;
-  left: 6px;
-  fill: none;
-  stroke: var(--check-color, #f9f9f9);
-  stroke-width: 2;
-  stroke-linecap: round;
-  stroke-linejoin: round;
-  stroke-dasharray: 16px;
-  stroke-dashoffset: 16px;
-  transition: all 0.3s ease;
-  transition-delay: 0.1s;
-  transform: translate3d(0, 0, 0);
-}
-.checkbox .check span:first-child:before {
-  content: "";
-  width: 100%;
-  height: 100%;
-  background: var(--background-color, #8f44fd);
-  display: block;
-  transform: scale(0);
-  opacity: 1;
-  border-radius: 50%;
-  transition-delay: 0.2s;
-}
-.checkbox .check:hover span:first-child {
-  border-color: var(--border-color, #8f44fd);
-}
-.checkbox .input:checked + .check span:first-child {
-  border-color: var(--border-color, #8f44fd);
-  background: var(--background-color, #8f44fd);
-  animation: check 0.6s ease;
-}
-.checkbox .input:checked + .check span:first-child svg {
-  stroke-dashoffset: 0;
-}
-.checkbox .input:checked + .check span:first-child:before {
-  transform: scale(2.2);
-  opacity: 0;
-  transition: all 0.6s ease;
-}
-.checkbox .input:checked + .check span:last-child {
-  color: rgb(255 255 255 / 10%);
-  transition: all 0.3s ease;
-}
-.checkbox .input:checked + .check span:last-child:after {
-  transform: scaleX(1);
-  transition: all 0.3s ease;
-}
-
-@keyframes check {
-  50% {
-    transform: scale(1.2);
-  }
-}
-
-.checkbox-label {
-  display: inline-block;
-  margin-left: 8px; // Ajuste conforme necessário
-  color: var(--check-color, #f9f9f9);
-  font-size: 14px; // Ajuste conforme necessário
-}

package/src/components/inputs/checkbox/Checkbox.vue

@@ -1,53 +0,0 @@
-<template>
-  <div
-    class="checkbox"
-    :style="{
-      '--background-color': backgroundColor || '#8f44fd',
-      '--border-color': borderColor || '#8f44fd',
-      '--check-color': checkColor || '#f9f9f9'
-    }"
-  >
-    <input
-      class="input"
-      id="check"
-      :checked="checked"
-      type="checkbox"
-      style="display: none"
-    />
-    <label class="check" for="check">
-      <span>
-        <svg width="12px" height="9px" viewbox="0 0 12 9">
-          <polyline points="1 5 4 8 11 1"></polyline>
-        </svg>
-      </span>
-    </label>
-    <span class="checkbox-label">{{ label }}</span>
-  </div>
-</template>
-
-<script setup lang="ts">
-defineProps({
-  checked: {
-    type: Boolean,
-    required: false
-  },
-  label: {
-    type: String,
-    required: false
-  },
-  backgroundColor: {
-    type: String,
-    required: false
-  },
-  checkColor: {
-    type: String,
-    required: false
-  },
-  borderColor: {
-    type: String,
-    required: false
-  }
-})
-</script>
-
-<style lang="scss" scoped src="./Checkbox.scss" />

package/src/components/teste/Teste.stories.ts

@@ -1,214 +0,0 @@
-import type { Meta, StoryFn } from '@storybook/vue3'
-import Teste from './Teste.vue'
-
-const meta: Meta = {
-  title: 'Example/Teste',
-  component: Teste,
-  argTypes: {
-    textProp: {
-      control: 'text',
-      description: 'Texto exibido no componente',
-      table: {
-        category: 'Propriedades',
-        type: { summary: 'string' },
-        defaultValue: { summary: '' }
-      }
-    },
-    booleanProp: {
-      control: 'boolean',
-      description: 'Valor booleano para o componente',
-      table: {
-        category: 'Propriedades',
-        type: { summary: 'boolean' },
-        defaultValue: { summary: 'false' }
-      }
-    },
-    numberProp: {
-      control: 'number',
-      description: 'Valor numérico para o componente',
-      table: {
-        category: 'Propriedades',
-        type: { summary: 'number' },
-        defaultValue: { summary: '0' }
-      }
-    },
-    rangeProp: {
-      control: { type: 'range', min: 0, max: 100, step: 1 },
-      description: 'Valor dentro do intervalo definido',
-      table: {
-        category: 'Propriedades',
-        type: { summary: 'number' },
-        defaultValue: { summary: '0' }
-      }
-    },
-    radioProp: {
-      control: 'radio',
-      options: ['Option 1', 'Option 2', 'Option 3'],
-      description: 'Opção selecionada',
-      table: {
-        category: 'Propriedades',
-        type: { summary: 'string' },
-        defaultValue: { summary: 'Option 1' }
-      }
-    },
-    inlineRadioProp: {
-      control: 'inline-radio',
-      options: ['Option 1', 'Option 2', 'Option 3'],
-      description: 'Opção selecionada em linha',
-      table: {
-        category: 'Propriedades',
-        type: { summary: 'string' },
-        defaultValue: { summary: 'Option 1' }
-      }
-    },
-    checkProp: {
-      control: 'check',
-      options: ['Option 1', 'Option 2', 'Option 3'],
-      description: 'Opções selecionadas',
-      table: {
-        category: 'Propriedades',
-        type: { summary: 'string[]' },
-        defaultValue: { summary: '[]' }
-      }
-    },
-    inlineCheckProp: {
-      control: 'inline-check',
-      options: ['Option 1', 'Option 2', 'Option 3'],
-      description: 'Opções selecionadas em linha',
-      table: {
-        category: 'Propriedades',
-        type: { summary: 'string[]' },
-        defaultValue: { summary: '[]' }
-      }
-    },
-    selectProp: {
-      control: 'select',
-      options: ['Option 1', 'Option 2', 'Option 3'],
-      description: 'Opção selecionada',
-      table: {
-        category: 'Propriedades',
-        type: { summary: 'string' },
-        defaultValue: { summary: 'Option 1' }
-      }
-    },
-    multiSelectProp: {
-      control: 'multi-select',
-      options: ['Option 1', 'Option 2', 'Option 3'],
-      description: 'Opções selecionadas',
-      table: {
-        category: 'Propriedades',
-        type: { summary: 'string[]' },
-        defaultValue: { summary: '[]' }
-      }
-    },
-    objectProp: {
-      control: 'object',
-      description: 'Objeto para o componente',
-      table: {
-        category: 'Propriedades',
-        type: { summary: 'object' },
-        defaultValue: { summary: '{}' }
-      }
-    },
-    arrayProp: {
-      control: 'object',
-      description: 'Array para o componente',
-      table: {
-        category: 'Propriedades',
-        type: { summary: 'array' },
-        defaultValue: { summary: '[]' }
-      }
-    },
-    colorProp: {
-      control: 'color',
-      description: 'Cor em formato hexadecimal, rgb ou nome da cor',
-      table: {
-        category: 'Propriedades',
-        type: { summary: 'string' },
-        defaultValue: { summary: '#000000' }
-      }
-    },
-    dateProp: {
-      control: 'date',
-      description: 'Data no formato ISO',
-      table: {
-        category: 'Propriedades',
-        type: { summary: 'string' },
-        defaultValue: { summary: new Date().toISOString().substr(0, 10) }
-      }
-    },
-    fileProp: {
-      control: 'file',
-      description: 'Arquivo selecionado',
-      table: {
-        category: 'Propriedades',
-        type: { summary: 'File' },
-        defaultValue: { summary: 'null' }
-      }
-    }
-  }
-}
-
-export default meta
-
-const Template: StoryFn<{
-  textProp: string
-  booleanProp: boolean
-  numberProp: number
-  rangeProp: number
-  radioProp: string
-  inlineRadioProp: string
-  checkProp: string[]
-  inlineCheckProp: string[]
-  selectProp: string
-  multiSelectProp: string[]
-  objectProp: Record<string, any>
-  arrayProp: any[]
-  colorProp: string
-  dateProp: string
-  fileProp: File | null
-}> = (args) => ({
-  components: { Teste },
-  setup() {
-    return { args }
-  },
-  template: '<Teste v-bind="args" />'
-})
-
-export const Primary = Template.bind({})
-Primary.args = {
-  textProp: 'Hello Storybook',
-  booleanProp: true,
-  numberProp: 42,
-  rangeProp: 50,
-  radioProp: 'Option 1',
-  inlineRadioProp: 'Option 1',
-  checkProp: ['Option 1', 'Option 3'],
-  inlineCheckProp: ['Option 1', 'Option 3'],
-  selectProp: 'Option 2',
-  multiSelectProp: ['Option 1', 'Option 2'],
-  objectProp: { key1: 'value1', key2: 'value2' },
-  arrayProp: ['Item 1', 'Item 2'],
-  colorProp: '#ff00ff',
-  dateProp: new Date().toISOString().substr(0, 10),
-  fileProp: null
-}
-
-export const Secondary = Template.bind({})
-Secondary.args = {
-  textProp: 'Secondary Story',
-  booleanProp: false,
-  numberProp: 24,
-  rangeProp: 25,
-  radioProp: 'Option 2',
-  inlineRadioProp: 'Option 2',
-  checkProp: ['Option 2'],
-  inlineCheckProp: ['Option 2'],
-  selectProp: 'Option 1',
-  multiSelectProp: ['Option 2', 'Option 3'],
-  objectProp: { keyA: 'valueA', keyB: 'valueB' },
-  arrayProp: ['Item A', 'Item B'],
-  colorProp: '#00ff00',
-  dateProp: new Date().toISOString().substr(0, 10),
-  fileProp: null
-}

package/src/components/teste/Teste.vue

@@ -1,96 +0,0 @@
-<template>
-  <div>
-    <h1>{{ textProp }}</h1>
-    <p>Boolean: {{ booleanProp }}</p>
-    <p>Number: {{ numberProp }}</p>
-    <p>Range: {{ rangeProp }}</p>
-    <p>Radio: {{ radioProp }}</p>
-    <p>Inline Radio: {{ inlineRadioProp }}</p>
-    <p>Check: {{ checkProp }}</p>
-    <p>Inline Check: {{ inlineCheckProp }}</p>
-    <p>Select: {{ selectProp }}</p>
-    <p>Multi-Select: {{ multiSelectProp }}</p>
-    <p>Object: {{ objectProp }}</p>
-    <p>Array: {{ arrayProp }}</p>
-    <p>
-      Color:
-      <span :style="{ backgroundColor: colorProp }">{{ colorProp }}</span>
-    </p>
-    <p>Date: {{ dateProp }}</p>
-    <p>File: {{ fileProp ? fileProp.name : 'No file selected' }}</p>
-  </div>
-</template>
-
-<script>
-export default {
-  name: 'Teste',
-  props: {
-    textProp: {
-      type: String,
-      default: 'Hello Storybook'
-    },
-    booleanProp: {
-      type: Boolean,
-      default: true
-    },
-    numberProp: {
-      type: Number,
-      default: 42
-    },
-    rangeProp: {
-      type: Number,
-      default: 50
-    },
-    radioProp: {
-      type: String,
-      default: 'Option 1'
-    },
-    inlineRadioProp: {
-      type: String,
-      default: 'Option 1'
-    },
-    checkProp: {
-      type: Array,
-      default: () => ['Option 1', 'Option 3']
-    },
-    inlineCheckProp: {
-      type: Array,
-      default: () => ['Option 1', 'Option 3']
-    },
-    selectProp: {
-      type: String,
-      default: 'Option 2'
-    },
-    multiSelectProp: {
-      type: Array,
-      default: () => ['Option 1', 'Option 2']
-    },
-    objectProp: {
-      type: Object,
-      default: () => ({ key1: 'value1', key2: 'value2' })
-    },
-    arrayProp: {
-      type: Array,
-      default: () => ['Item 1', 'Item 2']
-    },
-    colorProp: {
-      type: String,
-      default: '#ff00ff'
-    },
-    dateProp: {
-      type: String,
-      default: new Date().toISOString().substr(0, 10)
-    },
-    fileProp: {
-      type: Object,
-      default: null
-    }
-  }
-}
-</script>
-
-<style scoped>
-div {
-  padding: 20px;
-}
-</style>